web-dev-qa-db-ja.com

Bootstrap scrollspy関数にスムーズスクロールを追加する方法

しばらくの間、サイトにスムーズなスクロール機能を追加しようとしていますが、機能しないようです。

ナビゲーションに関連する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>

価値のあるものについては、 here はこれまでに行ったことに関する情報を受け取った場所であり、 here は現在の形式のサイトです。あなたが私を助けることができるならば、私はあなたにパイまたはクッキーまたは何かを焼きます。ありがとう！

javascripthtmlcsstwitter-bootstrapsmooth-scrolling
64
Brian

そのプラグインは本当に必要ですか？ scrollTopプロパティをアニメーション化するだけです：

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

});

フィドル

199
nice ass

固定navbarがある場合、このようなものが必要になります。

上記の回答とコメントの最良のものから...

$(".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()を呼び出す前にハッシュを変数targetに保存し、後でpupadupaで言及されているように、その保存された値を参照します。

次。 window.location.hash = targetを使用することはできません。URLと場所を別々にではなく同時に設定するためです。 idがhref ...に一致するが、固定トップナビゲーションバーで覆われている要素の先頭に位置を持つことになります。

これを回避するには、scrollTop値を、ターゲットの垂直スクロール位置の値から固定ナビゲーションバーの高さを引いた値に設定します。その値を直接ターゲットにすると、後で調整を追加したり、プロ並みのジッターを取得したりする代わりに、スムーズなスクロールが維持されます。

URLが変更されないことに気付くでしょう。これを設定するには、代わりにreturn window.history.pushState(null, null, target);を使用して、手動でURLを履歴スタックに追加します。

できた！

その他の注意事項：

1）.onメソッドを使用することは、.bindまたは.live、さらには.clickよりも優れた最新の（2015年1月現在の）jqueryメソッドです。見つけるためにあなたに。

2）navOffset値は関数内でも外部でもかまいませんが、他の関数/ DOM操作のためにその垂直方向のスペースを非常によく参照できるため、おそらく外部で必要になります。しかし、私はそれを1つの機能にきれいにするために内部に残しました。

15
ahnbizcad
$("#YOUR-BUTTON").on('click', function(e) {
   e.preventDefault();
   $('html, body').animate({
        scrollTop: $("#YOUR-TARGET").offset().top
     }, 300);
});
8
Marcelo Cintra de Melo

Jqueryイージングプラグインをダウンロードする場合は、 （チェックアウト） で、これを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>
4
escolta13

私はそれを組み合わせて、これが結果です-

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

私はそれをテストし、それはうまく動作します。これが誰かを助けることを願っています:)

3
genisugt

onetrickponyを投稿しても大丈夫ですが、より一般的なソリューションが必要な場合は、次のコードを使用するだけです。

アンカーのidだけを選択する代わりに、それをもう少し標準的にし、<a>- Tagの属性nameを選択することができます。これにより、余分なidタグを書く必要がなくなります。 smoothscrollクラスをnavbar要素に追加するだけです。

変更点

1）$('#nav ul li a[href^="#"]')から$('#nav.smoothscroll ul li a[href^="#"]')

2）$(this.hash)から$('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;

  });
});
0
Patrick Hillert
// styles.css
html {
    scroll-behavior: smooth
}

ソース： https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2

0
James Akwuh