在bootstrap scrollspy上简单缓和

对于那些知道javascript / jquery好的人来说，这是一个非常简单的问题。 我对这一切都很陌生，无法做到。 我找到了计算导航栏偏移量的代码，如下所示：

var offset = 50; $('.navbar li a').click(function(event) { event.preventDefault(); $($(this).attr('href'))[0].scrollIntoView(); scrollBy(0, -offset); }); 

这是迄今为止我所拥有的小提琴的例子 。 正如您所看到的，如果您单击导航栏中的链接，它只会跳到部分。 在这个脚本中添加easing动的位置使其向下滚动更平滑？

使用原始代码，我首先找到了那个流畅的滚动但是新脚本丢失了。 这是旧代码：

 $(function() { $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); event.preventDefault(); }); }); 

Answer 1

Plavookac你好。
我已经在这个小提琴中为你设置了一个工作样本。
将此代码放在页面中时，将其放在所有其他js脚本链接下面。 或者如果您将其放在脚本链接中，请将链接放在末尾。 我认为你已经拥有了jquery链接。

在这里看一下这段代码，你会看到平滑的滚动和偏移。

 $(document).ready(function(){ // Add scrollspy to  $('body').scrollspy({target: "#navbar"}); // Add smooth scrolling on all links inside the navbar $("#navbar a").on('click', function(event) { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top - 60 }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); }); }); 

注意这行代码… event.preventDefault(); 这用于在首次单击以开始滚动时防止闪烁。

这部分代码将处理平滑滚动 。

 // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top - 60 }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); 

这有帮助吗？