具有平滑滚动的粘性导航正在跳跃

时间:2012-10-19 15:13:43

标签: jquery header navigation sticky smooth-scrolling

我遇到了各种各样的问题,包括导航和平滑滚动。我只是不太了解jQuery来解决问题。我正在使用Chris Coyer的平滑滚动片段:http://css-tricks.com/snippets/jquery/smooth-scrolling/。我的页面在这里:http://clients.ekcetera.com/agivingchance

以下是我的问题:

  1. 对于任何导航项目,它会部分滚动,然后跳转到该位置。我很确定这是因为我不知道如何考虑粘性标题,所以我把锚点放了一点以说明锚点的高度。因此,它会到达锚点并停止,然后跳转到正确的视图。
  2. 单击后退按钮时,似乎并不总是指向正确的位置 - 有时它非常随机。我认为这与问题1有关,希望它会自行解决。我甚至可以完全删除浏览器历史记录/后退按钮的东西,但就像我说的,我不足以知道要删除的内容。
  3. 有什么建议吗?

    提前致谢!

1 个答案:

答案 0 :(得分:1)

1。使用Devin Sturgeon关于Smooth的评论中的代码     滚动帖子。另外,我添加了一些减法来弥补     你的粘性标题。调整为喜欢。

// your functions go here 
$('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 - 181
            }, 1000);
            return false;
        }
    }
});

2. 将所有锚点移动到要滚动到的实际元素。

(参考:http://css-tricks.com/snippets/jquery/smooth-scrolling/#comment-197181