Question

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

var offset = 50;

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

});

这是迄今为止我所拥有的fiddle example。正如您所看到的，如果您单击导航栏中的链接，它只会跳到部分。在此脚本中添加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 你好。
我已在此 Fiddle 中为您设置了一个工作示例将此代码放在页面中时，将其放在所有其他js脚本链接下面。或者如果您将其放在脚本链接中，请将链接放在最后。我认为你已经拥有了jquery链接。

在这里查看此代码，您将看到平滑滚动和偏移。

$(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;
    });
  });
});

注意这行代码...... 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;
});

这有帮助吗？

在bootstrap scrollspy上简单缓和

1 个答案: