在使用我的导航栏导航到ID时,努力实现平滑滚动功能。相反,它会使默认跳转,这有点眼睛疼痛。
我使用jQuery非常缺乏经验,所以任何指向正确方向的人都会非常感激。
我试图实现这一点,但正如我所说,它是“跳跃”。而不是滚动。
HTML
<li>
<a href="#popular">Most Popular</a>
</li>
<div class="col-sm-12" id="popular">
<h3><i aria-hidden="true" class="fa fa-fire"></i> Most Popular</h3>
</div>
jQuery
$(document).ready(function() {
$("#popular").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('col-sm-12').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
window.location.hash = hash;
});
}
答案 0 :(得分:1)
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
在你的jQuery文件中的$(document).ready函数中添加上面的内容,所有以#开头的链接都会有一个动画滚动到目标。
答案 1 :(得分:0)
也许尝试指定缓动选项。
这样的事情:
$("#popular").click(function() {
$('html, body').animate({
scrollTop: $("#popular").offset().top
}, 800, 'linear');
});
或者:
$(document).ready(function () {
$("#popular").on('click', function (e) {
$('.col-sm-12').animate({
scrollTop: $(this).offset().top
}, 800);
});
});