Html page load at the bottom

Question

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

See http://stackoverflow.com/questions/1890995/jquery-scroll-to-bottom-of-page-iframe. — rid, Oct 08 '11 at 21:41
yes you can use javascript or jquery to trigger the scroll event on page load/body load. — Punit, Oct 08 '11 at 21:43

score 7 · Answer 1 · answered Oct 08 '11 at 21:42

7

Try this:

window.scroll(0, document.documentElement.scrollHeight)

answered Oct 08 '11 at 21:42

Ry-

218,210
55
464
476

score 2 · Answer 2 · answered Mar 26 '21 at 22:24

Here is a method that worked for me:

Expected outcome:

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.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Documentation for window.scrollTo: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

Documentation for history.scrollRestoration: https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

score 1 · Answer 3 · answered Jun 21 '12 at 17:05

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.com/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.

score 1 · Answer 4 · answered Oct 08 '11 at 21:44

1

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>

answered Oct 08 '11 at 21:44

Dzoki

739
4
14

Why would you do it twice, a second apart? (Also, why would you use an inline handler and `setTimeout` with a string argument?) – Ry- Oct 08 '11 at 22:10

score 0 · Answer 5 · answered Sep 07 '12 at 11:32

0

Using jquery you could do this:

$("html, body").animate({ scrollTop: $(document).height() }, "slow");

answered Sep 07 '12 at 11:32

mtk

13,221
16
72
112