平滑滚动不工作散列URL

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (25)

我有一个问题,顺利滚动锚标签在侧。我使用带词缀的引导卷轴间谍。标题是固定的位置,因此,当我们点击边菜单锚,它导航到特定的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();
              });

这将计算错误的偏移量顶部(位于菜单下方)。

提问于
用户回答回答于

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

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

在平滑滚动之后,更改散列所需的javascript函数如下:

history.pushState(null, null, '#myhash');
用户回答回答于

这是意料之中的。浏览器的默认行为是使用与哈希相匹配的id将滚动卷抓取到元素。jQuery很可能执行动画,但是动画启动时,不需要调整滚动。

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

扫码关注云+社区

领取腾讯云代金券