66

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

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

参考までに、これまでに行ったことに関する情報を入手した場所と、現在の形式のサイトを示します。手伝ってくれるなら、パイかクッキーか何かを焼いてあげましょう。ありがとう！

4

8 に答える 8

203

そのプラグインは本当に必要ですか？プロパティをアニメーション化することができ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;
     });

});

フィドル

于 2013-02-11T02:29:22.933 に答える
15

固定ナビゲーションバーがある場合は、このようなものが必要になります。

上記の回答とコメントの最高のものから取って...

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

まず、「未定義」エラーを防ぐために、targetを呼び出す前にハッシュを変数にpreventDefault()保存し、後でその保存された値を参照します。

次。window.location.hash = targetURLと場所を別々に設定するのではなく、同時に設定するため使用できません。ID が href と一致する要素の先頭に位置が設定されますが、上部の固定ナビゲーション バーで覆われています。

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

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

終わり！

その他の注意事項:

1).onメソッドの使用は、最新 (2015 年 1 月現在) の jquery メソッドであり、 or.bindよりも優れています。理由については、後で説明します。.live.click

2) navOffset 値は関数内または関数外にすることができますが、他の関数 / DOM 操作のためにその垂直スペースを参照する可能性が非常に高いため、おそらく外部で使用する必要があります。しかし、私はそれを1つの機能にきちんとするために中に残しました.

于 2015-02-03T06:28:20.900 に答える
8 
$("#YOUR-BUTTON").on('click', function(e) {
   e.preventDefault();
   $('html, body').animate({
        scrollTop: $("#YOUR-TARGET").offset().top
     }, 300);
});
于 2015-02-24T15:02:00.137 に答える
8 
// styles.css
html {
    scroll-behavior: smooth
}

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

于 2019-07-29T17:44:12.630 に答える
4

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

また、次のようにスムーズ スクロール クラスを a タグに追加することも忘れないでください。

 <li><a href="#about" class="smooth-scroll">About Us</a></li>
于 2016-11-02T16:14:49.857 に答える
3

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

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

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

于 2015-06-11T21:39:35.427 に答える