Question

我有一小段代码可以生成一个平滑滚动来锚定标签并再次返回。我的网站设计有一个高度为170px的固定标题。所以为了弥补这一点，java已被修改如下。

var jump=function(e)
{
   e.preventDefault();
   var target = $(this).attr("href");
   $('html,body').animate(
   {
      scrollTop: $(target).offset().top-170 // modification
   },1000,function()
   {
      location.hash = target;
   });
}
$(document).ready(function()
{
   $('a[href*=#]').bind("click", jump);
   return false;
});

此代码在Chrome和Safari中完美运行，但在IE＆amp; Firefox可以滚动到预定的位置，并在页面上向下跳170px。

有什么想法吗？

谢谢，丹

Answer 1

问题在于，当您的动画完成时，您设置location.hash，这会使浏览器跳转到锚点。作为一个简单的解决方法，不要阻止点击的哈希更改，而是保存当前的滚动位置。这样你的浏览器就会马上跳到哈希。

要为整个事物制作动画，您可以捕捉hashchange事件，并立即跳回您离开的位置，并将过渡动画设置为您内心的内容。

较旧的浏览器可能会遇到一些闪烁，看看它是否适合您，值得一试。

var scrollFrom = 0;

$('a[href*=#]').click(function(e){
    scrollFrom = $(window).scrollTop();
});

$(window).bind('hashchange',function(){
    $(window).scrollTop(scrollFrom);
    var target = '#' + location.hash.replace(/#/,'');
    $('html,body').animate({
        scrollTop: $(target).offset().top-170 // modification
    },1000);
});

或者您也可以按照自己的方式进行操作，只需在标记中添加锚点的实际ID，以防止浏览器自动跳转到那里，然后将前缀添加到单击的哈希中以使用选择器定位元素。

另请参阅@ fudgey的清理'html,body'选择器的答案。

Answer 2

我看到两个问题：

当您在回调函数中设置哈希时，它会使页面跳转到锚点。因此，我认为最好的解决方案是在你的锚点下方留下一个保证金。这样你就不需要减去170个像素，并且回调中的哈希变化不会使页面跳转。
第二个问题是使用$('html,body')进行滚动。 Opera似乎将两者视为单独的元素，因此您将看到页面滚动两次。这是一个很好的cross-browser fix。

jQuery Smooth Scroll跨浏览器问题

2 个答案: