平滑滚动在哈希URL上不工作
我有一个问题，在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();
});这会计算错误的偏移量顶部(位于菜单下方)
回答 2
Stack Overflow用户
发布于 2018-06-05 05:06:57
问题出在超链接上，解决方法很简单。
将导航列表的li元素中的所有超链接替换为常规span元素，并将click事件绑定到此元素。在此单击事件中，滚动到指定位置并更新查询字符串。通过javascript更新查询字符串不会使浏览器立即转到此位置，从而启用平滑滚动。
在平滑滚动之后，您需要更改散列的javascript函数如下：
history.pushState(null, null, '#myhash');做了一个小提琴来说明。请注意。由于限制，Pushstate不能在小提琴中工作。http://jsfiddle.net/xpvt214o/183435/
Stack Overflow用户
发布于 2018-06-05 06:54:37
这是意料之中的。浏览器的默认行为是将滚动捕捉到id与散列匹配的元素。Jquery可能正在执行动画，但是在动画开始时，您的滚动不需要进行调整。
解决方案是选择一个或另一个，使用jQuery滚动到一个元素，或者滚动到一个具有id和url散列的元素。
https://stackoverflow.com/questions/50687877
复制相似问题