页面加载后向下滚动

Question

当页面加载时，我需要向下滚动约50px。这是我使用的代码：

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

我也尝试过：

scrollTo(0,55)

这在Firefox和IE中运行良好，但在Chrome、Safari和Opera中，它会滚动到正确的位置，然后跳回到顶部（或最后的滚动位置）。

我也尝试使用元素ID来滚动，但浏览器仍然覆盖它。我像这样尝试：

htttp://website.com#element

- Jon Snow

---

请尝试将您的代码放入DOM准备函数中，而不是$(function(){ $("html,body").scrollTop(55); });。 - Stphane

刚试了一下，还是被浏览器覆盖了。 - Jon Snow

你的 URL 中是否也有散列符号（hash）？ - Dominic Green

@f00bar 在jQuery中的 $(function(){}) 结构只是 $(document).ready(function(){}) 的别名，因此它们是相同的。两者都等待DOM准备就绪事件（以及其他复杂的检查来处理跨浏览器不一致性）。 - Ken Bellows

@kenbyes，仍然有一些在幕后执行的代码，这可能是为什么一些浏览器表现不同的原因 :/ 只是假设。 - Stphane

我能让这个工作的唯一方法是使用超时，将其设置为仅1毫秒。 - Brad Adams

Answer 1

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

将id="123"添加到任何<div>，页面加载时它会自动滚动到底部。

如果前面的脚本无法正常工作，这里是另一个脚本！

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

将id="fixed"添加到任何<div>标签中，页面加载时它将自动滚动到底部。

- johnscoop

Answer 2

我认为你的问题在于你正在使用 $(window).load，而一些浏览器可能会出现问题，因为事物还没有完全渲染。尝试切换到

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

这里所有浏览器都能正常工作，可以查看http://jsfiddle.net/7jwRk/1/

信息

$(document).ready

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

$(window).load

在完整页面加载完成后执行，包括所有框架、对象和图像

- Dominic Green

---

你的 jsfiddle 也使用了 $(window).load()。 - HenningCash

这个代码是有效的，但当我放到我的页面上时就不行了。我认为这个代码在 jsfiddle 中运行是因为它在一个 iframe 中。 - Jon Snow

如果您尝试像这样做，它可能会向您显示何时以及是否有东西劫持了您的scrollTop：$("html,body").animate({scrollTop: 0}, 1000, function(){alert("got here")}); - Dominic Green

@user2204158 如果你在 jsfiddle 选择了 'no wrap - in body'，这个也可以工作。 - Abhitalks

我决定采用上述解决方案，但稍微加了一点超时时间（50毫秒左右）。需要考虑的一件事是，在某些浏览器（或至少是Chrome）中，滚动位置会被保存，因此向下滚动只有在用户第一次打开页面时才起作用。（当关闭浏览器时它将被清除） - Jon Snow

Answer 3

您可以使用scrollIntoView()函数。这在大多数浏览器中都得到支持（甚至IE6）。

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

- Rohit Vyas

Answer 4

在尝试使用scrollIntoView()时，我发现在页面绘制时它能够正确滚动，但之后会无缘无故地跳到顶部，因此我采用了以下方法：

http://website.com/#target

并且

<a name="target">

然后浏览器就能准确理解我的需求并执行它。但是这只有因为我们控制着URI，所以在某些情况下它自然也无法工作。

- Phlip

Answer 5

或者，只需在您的正文末尾添加此代码：

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

- Abhitalks

Answer 6

如果您使用两个显示器，请确保在打开浏览器窗口并加载脚本实现的页面时，不要将该窗口移动到另一个具有不同屏幕分辨率的显示器上。简而言之：不要将浏览器窗口跨越到另一个显示器上，只需为每个显示器/屏幕分辨率打开一个新的浏览器窗口即可。

- Wolfgaaard

---

这个回答与问题本身无关。即使使用两个显示器可能会改变一些行为，但这与如何在页面加载时滚动无关。 - Sakura Kinomoto