Question

我注意到在IE 9,10和10中使用jquery的scrollTop时出现奇怪的行为。 11.当触发该功能时，IE将页面滚动位置重置为0，最顶部，然后将其设置为正确的部分。我正在寻找一种方法来使滚动行为匹配在其他浏览器中找到它从当前位置滚动。这是我的相关代码：

首先，我将click事件绑定到我的元素：

$("body").on("click", ".marker", function() {
    window.requestAnimationFrame(function() {
        theAutoScrollingFunctions.scrollToTarget("city", 5000);
    });
});

然后我的滚动功能：

$("html,body").animate({ scrollTop: $(document).height()}, 500, function() {
      // Callback stuff
});

滚动在技术上有效但在IE中页面重置为顶部然后滚动。我尝试在整个过程中放置return false;值，但没有运气。

还有其他人看过这个问题吗？

Answer 1

在我构建的网站上滚动到部分时，我使用相同的动画功能。在IE 8+中进行测试时，它可以完美运行。也许$(document).height()是使重置发生在顶部的部分？

这就是我喜欢的方式：

<ul id="section-links">
  <li><a href="#section1">Scroll to section1</a><li>
  <li><a href="#section2">Scroll to section2</a><li>
</ul>
<section id="section1">
  <h1>This is the first section</h1>
</section>
<section id="section2">
  <h1>Another example section</h2>
</section>

<style>
  section{display:block;width:100%;min-height:300px;}
</style>

<script>
  jQuery(document).ready(function($){
    $('#section-links a').click(function(){
      var section = $(this).attr('href');
      $('html, body').animate({scrollTop:$(section).offset().top - 10}, 'slow');
    });
  });
</script>

正如你所看到的，我喜欢在滚动的部分上方添加一些空格，因此标题和诸如此类的东西不会卡在视口之外。

我没有看到您使用此方法描述的错误。

祝你好运

Answer 2

问题似乎出现在我的jQuery选择器上。

$("html,body").animate....

已更改为

$("html").animate....

这看起来已经解决了IE9 +中的问题，并且在我测试过的其他浏览器中保持了一致的行为。

jQuery scrollTop（）在IE中重置为Top

2 个答案: