平滑滚动在哈希URL上不工作
平滑滚动在哈希URL上不工作
提问于 2018-06-05 03:53:08
我有一个问题，在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();
});这会计算错误的偏移量顶部(位于菜单下方)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50687877
复制相关文章
相似问题