平滑滚动不适用于哈希 URL答案

【问题标题】：Smooth scroll not working on hash URL平滑滚动不适用于哈希 URL
【发布时间】：2018-06-04 19:53:07
【问题描述】：

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

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

这是在 URL 中附加哈希的链接：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();
              });

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

【问题讨论】：

问题是，如果你不从 URL 中删除散列，导航器仍然会尝试跳转到散列，这会导致错误的偏移量。唯一的解决方案是在为 html 设置动画之前从 URL 中删除哈希。
感谢您的信息。但我担心的是在 url 中保留哈希。
好吧，那么您需要将锚点放置在不干扰内容的位置。你想要达到的目标是不可能的。为什么不在锚点上使用padding-top: 60px;？或者在 dom 上使用 jQuery 来完成。
填充的问题是它使用了更多的白色空间，这破坏了预期的设计。 :(
好吧，那些h3 标签，顶部的边距为20px，顶部的边距为40px（= 60px）。会有什么不同？

标签： javascript jquery html twitter-bootstrap css

【解决方案1】：

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

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

平滑滚动后需要更改hash的javascript函数是这样的：

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

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

【讨论】：

@shahil-m 您需要更多帮助吗？

【解决方案2】：

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

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

【讨论】：