1

Twitter Bootstrap を使用してサイトを構築しています。以下の JavaScript を使用して scrollspy を動作させました。

$('body').scrollspy({ target: '.navbar' })

しかし、スクリプトを追加してスムーズなスクロールを有効にすると、機能しなくなりました。

<script type="text/javascript">
$(document).ready(function() {
  // navigation click actions 
  $('.scroll-link').on('click', function(event){
    event.preventDefault();
    var sectionID = $(this).attr("data-id");
    scrollToID('#' + sectionID, 750);
  });
  // scroll to top action
  $('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');     
  });
  // mobile nav toggle
  $('.nav-toggle').on('click', function (event) {
    event.preventDefault();
    $('#bs-example-navbar-collapse-1').toggleClass("open");
  });
});
// scroll function
function scrollToID(id, speed){
  var offSet = 70;
  var targetOffset = $(id).offset().top - offSet;
  var mainNav = $('#bs-example-navbar-collapse-1');
  $('html,body').animate({scrollTop:targetOffset}, speed);
  if (mainNav.hasClass("open")) {
    mainNav.css("height", "1px").removeClass("in").addClass("collapse");
    mainNav.removeClass("open");
  }
}
if (typeof console === "undefined") {
    console = {
        log: function() { }
    };
}
</script>

scrollspy を間違った位置に追加したに違いないと考えています。私はJavaScriptの知識がほとんどありません。誰かが正しい順序/スペース/行に挿入する方法を教えてくれれば、それは素晴らしいことです!

前もって感謝します！

4

1 に答える 1

0

jquery.localScroll (jquery.scrollTo に依存) などのサードパーティのプラグインを使用することもできます。スムーズなスクロールが可能で、実装も簡単です。ホイールを再実装するよりもはるかに簡単です。

https://github.com/flesler/jquery.localScroll

于 2014-03-11T02:16:36.843 に答える