如何将平滑滚动添加到Bootstrap的滚动间谍功能
我一直试图在我的网站上添加一个平滑的滚动功能一段时间，但似乎无法让它工作。
以下是我的导航相关的HTML代码：
<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="675">
<div class="navbar-inner" data-spy="affix-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#service-top">Services</a></li>
<li><a href="#contact-arrow">Contact</a></li>
</ul><!--/.nav-->
</div><!--/.nav-collapse collapse pull-right-->
</div><!--/.container-->
</div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->
这里是我添加的JS代码：
<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script>
$(document).ready(function(e) {
$('#nav').scrollSpy()
$('#nav ul li a').bind('click', function(e) {
e.preventDefault();
target = this.hash;
console.log(target);
$.scrollTo(target, 1000);
});
});
</script>
对于什么是值得的，这里是我收到我迄今为止所做的信息的地方，这里是我现在使用的网站。 如果你能帮助我，我会烤你一个饼或饼干什么的。 谢谢！
你真的需要这个插件吗？ 您可以为scrollTop属性设置动画效果：
$("#nav ul li a[href^='#']").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
// animate
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 300, function(){
// when done, add hash to url
// (default click behaviour)
window.location.hash = hash;
});
});
小提琴
如果你有一个固定的导航栏，你需要这样的东西。
从以上最好的答案和评论中...
$(".bs-js-navbar-scrollspy li a[href^='#']").on('click', function(event) {
var target = this.hash;
event.preventDefault();
var navOffset = $('#navbar').height();
return $('html, body').animate({
scrollTop: $(this.hash).offset().top - navOffset
}, 300, function() {
return window.history.pushState(null, null, target);
});
});
首先，为了防止“undefined”错误，请在调用preventDefault()之前将哈希值存储到变量target ，并稍后引用该存储值，如pupadupa所述。
下一个。 您不能使用window.location.hash = target因为它会同时设置url和位置，而不是单独设置。 您将最终拥有位于其id与href相匹配的元素开头的位置......但由您的固定顶级导航栏覆盖。
为了解决这个问题，您将您的scrollTop值设置为目标的垂直滚动位置值减去固定导航栏的高度。 直接针对该值保持平滑滚动，而不是之后添加调整，并获得不专业的外观抖动。
你会注意到url不会改变。 要设置它，请使用return window.history.pushState(null, null, target); 相反，要手动将url添加到历史堆栈。
完成！
其他说明：
1）使用.on方法是最新的（截至2015年1月）jquery方法比.bind或.live更好，甚至是.click因为我会留给你找出。
2）navOffset值可以在函数内部或外部，但是您可能会想要在外部使用，因为您可能很好地引用了其他函数/ DOM操作的垂直空间。 但是我把它放在里面，使它整齐地变成一个功能。
$("#YOUR-BUTTON").on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $("#YOUR-TARGET").offset().top
}, 300);
});
上一篇: How to add smooth scrolling to Bootstrap's scroll spy function