Question

我在sidenav上有一个平滑滚动锚标签的问题。我正在使用带有词缀的bootsrap scrollspy。标题位置固定，因此当我们点击侧面菜单锚点时，它会导航到特定的ID。问题是当它滚动到ID时，标题与内容重叠，所以我添加了一些偏移来滚动，但动画不平滑，每次点击都会闪烁。如何防止闪烁并平滑渲染动画。（要查看脚本/ HTMl / CSS，请使用查看源代码）

更新：我注意到当我们在URL中显示#ID时会发生此问题。任何想法我们怎样才能使它顺利？

以下是在网址中附加哈希的链接：http://103.50.162.107/~chaitol4/test/nohash/expertise.html

没有哈希的网址：http://103.50.162.107/~chaitol4/test/hash/expertise.html

单击sidenav上的项目时注意动画

我的JS：

 $(".smooth-scroll").click(function() {
       var headerHeight = 60;
       $('html, body').stop(true, true).animate({
       scrollTop: $(this.hash).offset().top - headerHeight
       }, 750);
        return false;
 });

更新了脚本：

 $(document).ready(function() {
              $(".smooth-scroll").on('click', function(event) {
                var hash = this.hash;
                $('html, body').animate({
                    scrollTop: $(hash).offset().top - 60
                  }, 800, function(){
                    window.location.hash = hash;
                    event.preventDefault();
                });
                event.preventDefault();
              });

这会计算错误的偏移顶部（在菜单下方）

Answer 1

问题在于超链接，解决方案很简单。

使用常规span元素替换导航列表的li元素中的所有超链接，并将click事件绑定到此。在此单击事件中，滚动到指定位置并更新查询字符串。通过javascript更新查询字符串不会导致浏览器立即转到此位置，从而启用平滑滚动。

在平滑滚动之后，您需要更改哈希的javascript函数是：

history.pushState(null, null, '#myhash');

做一个小提琴来说明。注意。由于限制，Pushstate不适用于小提琴。 http://jsfiddle.net/xpvt214o/183435/

Answer 2

这是预期的。浏览器的默认行为是将滚动捕捉到id与哈希匹配的元素。 Jquery可能正在执行动画，但是在动画开始时你的卷轴不需要调整。

解决方案是选择一个或另一个，使用jQuery滚动到元素或滚动到具有id和url哈希的元素。

平滑滚动无法处理哈希URL

2 个答案: