Is there a way (with CSS3, JS, or anything in between) to get a page to start at a certain point scrolled down?
I'd like for my page to load without the header initially displaying on load (meaning it's above the actual viewport of the user).
Is there a simple/easy way to go about this?
If you want to set the scroll position of document. body , you can scroll the entire window altogether using window. scrollTo() ; it takes either a pair of coordinates (x,y) or an options object – if you just want to scroll nicely to the top, try window. scrollTo({top:0,behavior:'smooth'}); .
First, set the scrolling flag to false . If the scroll event fires set the scrolling flag to true inside the scroll event handler. Then, execute the scroll event handler using the setInterval() every 300 milliseconds if the scroll events have been fired.
You can use standard javascript: window.scroll(x, y)
.
This should work pretty well considering that you'll be doing this at onload
, i.e. the window should begin at (0, 0). Play around with (x, y)
until you get your header to the position that you're happy with. Naturally you'll need to change it anytime the header moves.
Example:
<body onLoad="window.scroll(0, 150)">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With