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