Question

使用scrollTop导航到定位点时，我在多个浏览器中遇到了一个奇怪的问题。窗口正确滚动，但以难以破坏的方式锁定。以下是Safari中问题的视频，但在Chrome中也是如此：

http://www.screencast.com/t/vyM16IlVb

注意浏览器窗口如何与滚动进行对抗，无论是轻轻滚动还是积极滚动。它最终会破裂，但我无法弄清楚是什么使它成为可能。

我使用jQuery函数来平滑滚动我在网络上找到的锚链接。除了这个之外，它通常滚动得很好。这是脚本：

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

对于这可能是什么的任何想法将不胜感激。提前谢谢！

Answer 1

似乎动画仍在尝试达到它的目标滚动位置。 jQuery计算相对于当前滚动位置的offset（）。top，该位置在该点处是屏幕之外的位置，或者是负数。因此，当您对动画进行排队以达到负滚动位置时，它将永远无法到达它。

在触发动画之前尝试进行简单检查并防止出现负面目标。

 var top = target.offset().top;

 $('html,body').animate({
     scrollTop: top < 0 ? 0 : top
 }, 1000);

但如果页面已滚动，这不会滚动到您想要的位置，要解决此问题，请考虑当前的滚动位置，如下所示：

var top = target.offset().top + $(window).scrollTop();

 $('html,body').animate({
     scrollTop: top // top should never be negative this way
 }, 1000);

Answer 2

事实证明我在我的sitewide脚本文件中重复了完全相同的代码块，因此将其包含在本地（同一脚本的两个实例）导致冲突。删除本地副本导致一切正常工作。

使用jQuery，scrollTop和#anchors锁定奇怪的浏览器窗口

2 个答案: