如何添加平滑滚动Bootstrap的滚动间谍function
我一直试图添加一个平滑的滚动function到我的网站一段时间，但似乎无法得到它的工作。
这是我的导航的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>
至于什么是值得的， 这里是我收到的信息，到目前为止我所做的， 这里是我的网站在它的当前forms。 如果你能帮助我，我会烤你一个饼或cookies什么的。 谢谢！
你真的需要这个插件吗？ 您可以为scrollTop属性设置animation效果：
$("#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); }); });
首先，为了防止“未定义”的错误，请在调用preventDefault()之前将哈希值存储到variablestarget ，并稍后参考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操作的垂直空间。 但是我把它放在里面，把它整齐地整理成一个function。
$("#YOUR-BUTTON").on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $("#YOUR-TARGET").offset().top }, 300); });
我把它结合起来，这就是结果 –
$(document).ready(function() { $("#toTop").hide(); // fade in & out $(window).scroll(function () { if ($(this).scrollTop() > 400) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); $('a[href*=#]').each(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname && this.hash.replace(/#/,'') ) { var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']'); var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; if ($target) { var targetOffset = $target.offset().top; $(this).click(function() { $('html, body').animate({scrollTop: targetOffset}, 400); return false; }); } } }); });
我testing了它，它工作正常。 希望这会帮助别人:)
如果你下载了jquery easing插件（检查出来） ，那么你只需要把它添加到你的main.js文件中：
$('a.smooth-scroll').on('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top + 20 }, 1500, 'easeInOutExpo'); event.preventDefault(); });
也不要忘记添加smooth-scroll类到你的标签是这样的：
<li><a href="#about" class="smooth-scroll">About Us</a></li>
什么onetrickpony张贴是好的，但如果你想有一个更一般的解决scheme，你可以使用下面的代码。
不要只select锚点的id ，而应该使它更像标准，只需select<a> -Tag的属性name 。 这将节省您从写一个额外的id标记。 只需将smoothscroll类添加到navbar元素即可。
什么改变了
1） $('#nav ul li a[href^="#"]') to $('#nav.smoothscroll ul li a[href^="#"]')
2） $(this.hash) to $('a[name="' + this.hash.replace('#', '') + '"]')
最后的代码
/* Enable smooth scrolling on all links with anchors */ $('#nav.smoothscroll 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: $('a[name="' + this.hash.replace('#', '') + '"]').offset().top }, 300, function(){ // when done, add hash to url // (default click behaviour) window.location.hash = hash; }); });
