Jumping down the page |
Jumping down the page |
Brian Chandler |
Sep 7 2021, 02:07 AM
Post
#1
|
Jocular coder Group: Members Posts: 2,476 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! |
Christian J |
Sep 7 2021, 11:42 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
Brian Chandler |
Sep 8 2021, 02:37 AM
Post
#3
|
Jocular coder Group: Members Posts: 2,476 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.)
|
Lo-Fi Version | Time is now: 26th September 2024 - 11:33 AM |