The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Jumping down the page
Brian Chandler
post Sep 7 2021, 02:07 AM
Post #1


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



In my checkout shipping selection, I have buttons to go to the payment page, but I also want a "Contact" ("Ask"... not decided) button which jumps down the page to the contact form. In a simple case I would just use <a href="#contact">Contact us</a> (or similar), but I want to use JS to copy the current selection into the contact form (no problem), *then* jump down. What is the neatest way to do this? The method using an anchor and <a> is not entirely satisfactory, because the browser tends to position the (notional position of the) anchor precisely at the top of the screen -- it would be much nicer to get the form sensibly positioned on the screen. And it would be neater to do the jump in JS, to avoid having to add an <a> element.

Grateful for any suggestions - thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 7 2021, 11:42 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(Brian Chandler @ Sep 7 2021, 09:07 AM) *

I want to use JS to copy the current selection into the contact form (no problem), *then* jump down. What is the neatest way to do this?

With "current selection", do you mean the shopping basket contents? And do you mean you want the contact form to be already populated with the data when the user scrolls to the form? Copying the data to the contact form should be instantaneous if you already have the data in the shopping cart section on the same page.

QUOTE
The method using an anchor and <a> is not entirely satisfactory, because the browser tends to position the (notional position of the) anchor precisely at the top of the screen -- it would be much nicer to get the form sensibly positioned on the screen.

You could use padding on the element with the target ID.

With JS, scrollIntoView method gives more control, for example:

CODE
element.scrollIntoView({behavior: "smooth", block: "center"});

should scroll the target element smoothly to the vertical center of the viewport (apparently MSIE and Safari support the basic scrolling, but not the parameters between the curly brackets).

This post has been edited by Christian J: Sep 7 2021, 04:45 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Sep 8 2021, 02:37 AM
Post #3


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



Many thanks Christian. I will look at the docs for this - I just discovered that it is on page 590 of my (ancient) JS book, amazingly found by looking in the index for "scroll". (O'Reilly book by David Flanagan; the index is spectacularly useless in general, since it is not in alphabetical order. But once you know what the answer is, it's easy to find.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:32 AM