Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Jumping down the page

Posted by: Brian Chandler Sep 7 2021, 02:07 AM

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!

Posted by: Christian J Sep 7 2021, 11:42 AM

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, https://developer.mozilla.org/en-US/docs/Web/API/Element/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).

Posted by: Brian Chandler Sep 8 2021, 02:37 AM

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.)