I need an HTML page to automatically scroll down when the page loads. So basically loads at the bottom. Can JavaScipt be used?
Please can you help me or lead my in the right direction.
All help is appreciated. thanks
I need an HTML page to automatically scroll down when the page loads. So basically loads at the bottom. Can JavaScipt be used?
Please can you help me or lead my in the right direction.
All help is appreciated. thanks
Share Improve this question asked Oct 8, 2011 at 21:39 LukeLuke 311 gold badge1 silver badge3 bronze badges 2- 1 See stackoverflow./questions/1890995/…. – rid Commented Oct 8, 2011 at 21:41
- yes you can use javascript or jquery to trigger the scroll event on page load/body load. – Punit Commented Oct 8, 2011 at 21:43
5 Answers
Reset to default 7Try this:
window.scroll(0, document.documentElement.scrollHeight)
Here is a method that worked for me:
Expected oute:
- No scroll animation
- Loads at bottom of page on first load
- Loads on bottom of page for all refreshes
Code:
<script>
function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
history.scrollRestoration = "manual";
window.onload = scrollToBottom;
</script>
Why this may work over other methods:
Browsers such as Chrome have a built-in preset to remember where you were on the page, after refreshing. Just a window.onload doesn't work because your browser will automatically scroll you back to where you were before refreshing, AFTER you call a line such as:
window.scrollTo(0, document.body.scrollHeight);
That's why we need to add:
history.scrollRestoration = "manual";
before the window.onload to disable that built-in feature first.
References:
Documentation for
window.onload: https://developer.mozilla/en-US/docs/Web/API/GlobalEventHandlers/onload
Documentation for
window.scrollTo: https://developer.mozilla/en-US/docs/Web/API/Window/scrollTo
Documentation for
history.scrollRestoration: https://developer.mozilla/en-US/docs/Web/API/History/scrollRestoration
Something like this?
<html>
<head>
<script type="text/javascript">
function moveWin()
{
window.scroll(0,10000);
setTimeout('moveWin();',1000);
}
</script>
</head>
<body onLoad="moveWin();">
<!---- TEXT HERE ---->
</body>
</html>
If you want the page to load at the bottom and not show the scrolling animation, why not add an anchor tag to the very bottom of the page and have your link go straight to it (e.g., http://www.mysite./hello#bottom)? Your anchor tag could look like this: <a name="bottom" id="bottom"></a>
If you are wondering why I provided both name and id in this example, name is deprecated on <a> elements as of XHTML 1.0. Until name is absolutely no longer supported by the (X)HTML standard you are using, it may be safest to use both name and id on anchors linking to a part of the same page. This was noted in W3C's XHTML 1 spec.
Using jquery you could do this:
$("html, body").animate({ scrollTop: $(document).height() }, "slow");