Html page load at the bottom_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-11 12:25 出处：网络

I nee开发者_开发知识库d an HTML page to automatically scroll down when the page loads. So basically loads at the bottom.

相关专题：javascript

I nee开发者_开发知识库d 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

Try this:

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

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

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

Using jquery you could do this:

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

Html page load at the bottom

Here is a method that worked for me:

Expected outcome:

Code:

Why this may work over other methods:

References:

精彩评论

关注公众号

热门标签

图文推荐

Html page load at the bottom

Here is a method that worked for me:

Expected outcome:

Code:

Why this may work over other methods:

References:

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：