在bootstrap scrollspy上简单缓和

Question

This is pretty simple question I think for those who knows javascript/jquery good. 对于那些了解javascript / jquery的人来说，这是一个非常简单的问题。 I am pretty new to all this and couldn't make it. 我对这一切都很陌生，无法做到。 I found code that is calculating the offset of navbar that looks like this: 我找到了计算导航栏偏移量的代码，如下所示：

var offset = 50;

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

});

And here is the fiddle example of what I have so far. 这是迄今为止我所拥有的小提琴的例子。 As you can see if you click link in navbar it just skips to section. 正如您所看到的，如果您单击导航栏中的链接，它只会跳到部分。 Where in this script to add easing so it scroll down a bit smoother? 在这个脚本中添加easing动的位置使其向下滚动更平滑？

With original code I found first I had that smooth scroll but with new script is lost. 使用原始代码，我首先找到了那个平滑的滚动但是新脚本丢失了。 This is the old code: 这是旧代码：

$(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 Hi there. Plavookac你好。
I have set up a working sample here in this Fiddle for you. 我已经在这个小提琴中为你设置了一个工作样本。
When you place this code in your page, place it below all of you other js script links. 将此代码放在页面中时，将其放在所有其他js脚本链接下面。 or if you put this in a script link, place the link at the end. 或者如果您将其放在脚本链接中，请将链接放在最后。 I take it that you would already have the jquery link . 我认为你已经拥有了jquery链接。

Have a look at this code here, you will see the smooth scrolling and the offset. 在这里看一下这段代码，你会看到平滑的滚动和偏移。

$(document).ready(function(){
  // Add scrollspy to <body>   
  $('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;
    });
  });
});

Notice this line of code... event.preventDefault(); 注意这行代码... event.preventDefault(); this is used to prevent that flicker when first clicked to start the scrolling. 这用于在首次单击以开始滚动时防止闪烁。

This part of the code will handle the smooth scroll . 这部分代码将处理平滑滚动 。

// 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;
});

Does this help? 这有帮助吗？

在bootstrap scrollspy上简单缓和

问题描述

1 个解决方案

解决方案1
4 2015-10-03 23:37:49

在bootstrap scrollspy上简单缓和

问题描述

1 个解决方案

解决方案1 4 2015-10-03 23:37:49

解决方案1
4 2015-10-03 23:37:49