javascript - 平滑滚动不适用于哈希 URL

Question

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

更新:正如我所注意到的，当我们在 URL 中显示 #ID 时会发生此问题。知道我们怎样才能让它顺利吗？

这是在 URL 中附加哈希的链接:http://103.50.162.107/~chaitol4/test/nohash/expertise.html

没有哈希的 URL: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

问题出在超链接上，解决方法很简单。

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

平滑滚动后，你需要更改散列的javascript函数是这样的:

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

做了一个 fiddle 来说明。笔记。由于限制，Pushstate 无法正常工作。 http://jsfiddle.net/xpvt214o/183435/