javascript 在页面加载时向下滚动

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19450834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 15:38:10  来源:igfitidea点击:

Scroll down on page load

javascriptjqueryhtml

提问by Jon Snow

I need to scroll down about 50px when the page is loaded. This is what I'm using:

加载页面时,我需要向下滚动大约 50 像素。这就是我正在使用的:

$(window).load(function(){
    $("html,body").scrollTop(55);
});

I've also tried:

我也试过:

scrollTo(0,55)

This works fine in Firefox and IE, however in Chrome, Safari and Opera it scrolls down to the proper position and then jumps back up to the top(or the last scroll position).

这在 Firefox 和 IE 中工作正常,但是在 Chrome、Safari 和 Opera 中它向下滚动到正确的位置,然后跳回到顶部(或最后一个滚动位置)。

I've also tried using an element id to scroll down, but the browser still overwrites it. I tried like this:

我也试过使用元素 id 向下滚动,但浏览器仍然覆盖它。我试过这样:

htttp://website.com#element

回答by Dominic Green

I think your problem is that you are using $(window).load and some browsers are having problem as things havnt fully rendered yet. Try swapping to

我认为您的问题是您正在使用 $(window).load 并且某些浏览器存在问题,因为尚未完全呈现。尝试交换到

$(document).ready(function(){
    $("html,body").scrollTop(55);
});

Seems to work fine in all browsers here http://jsfiddle.net/7jwRk/1/

似乎在所有浏览器中都可以正常工作http://jsfiddle.net/7jwRk/1/

Info

信息

$(document).ready

$(document).ready

executes when HTML-Document is loaded and DOM is ready

在加载 HTML 文档且 DOM 准备就绪时执行

$(window).load

$(window).load

executes when complete page is fully loaded, including all frames, objects and images

当完整页面完全加载时执行,包括所有框架、对象和图像

回答by Rohit Vyas

You can use the scrollIntoView() function. This is supported accross most browsers (even IE6).

您可以使用 scrollIntoView() 函数。大多数浏览器(甚至 IE6)都支持这一点。

document.getElementById('header').scrollIntoView()

回答by johnscoop

<script type="text/javascript">
   $(document).ready(function(){
     var divLoc = $('#123').offset();
     $('html, body').animate({scrollTop: divLoc.top}, "slow");
 });
 </script>

Add id="123" to any <div>it will automatically scroll it down when page loads.

将 id="123" 添加到任何<div>它会在页面加载时自动向下滚动。

Here's an another script if the previous one wont work !

如果前一个脚本不起作用,这是另一个脚本!

  <script>
 window.setInterval(function() {
 var elem = document.getElementById('fixed');
 elem.scrollTop = elem.scrollHeight;  }, 3000);
 </script>

Add id="fixed" to any <div>it will automatically scroll it down when page loads.

将 id="fixed" 添加到任何<div>它会在页面加载时自动向下滚动。

回答by Abhitalks

Alternatively, just fire this at the end of your body:

或者,只需在你的身体末端发射这个:

...
    <script type="text/javascript">
        $("html,body").scrollTop(55);
    </script>
</body>
</html>

回答by Wolfgaaard

If you are using 2 monitors, be sure that when you open the window of your browser with the page for which the script is implemented, you don't move that window to the other monitor, with a different screen resolution. Shortly: don't cross the windows of the browser to a different monitor, just open a new window of the browser for each monitor/ screen resolution.

如果您使用 2 台显示器,请确保当您打开浏览器窗口和实现该脚本的页面时,不要将该窗口移动到具有不同屏幕分辨率的另一台显示器。简而言之:不要将浏览器的窗口切换到不同的显示器,只需为每个显示器/屏幕分辨率打开一个新的浏览器窗口。