スムーススクロールでjQueryが動作しない

Question

私はまったく新しいコードですが、スムーズなスクロールのためにjQueryスクリプトを使用しようとすると動作しません。

私のボタンをクリックすると、divにスクロールしますが、スムーズにはスクロールしません。

// Document ready shorthand statement 
 
$(function() { 
 
    $('.link').click(function() { 
 
     var id = $(this).attr('href'); 
 
     $('html,body').animate({ 
 
      scrollTop: $(id).offset().top 
 
     }, 'slow'); 
 
     // Prevent default behavior of link 
 
     return false; 
 
    }); 
 
});

#portfolio {/* just to make it visible */ 
 
    margin-top: 100vh; 
 
}

<a href="#portfolio"><button type="button" class="btn btn-lg btn-outline-info">Scroll down</button></a> 
 

 
<div id="portfolio" class="container pt-5"> 
 
    <div class="row d-flex justify-content-center"> 
 
     <img id="thumb" src="images/img/01.jpg" class="img-thumbnail m-2 img-responsive" width="300" height="200"> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

あなたは自分のマークアップ...

$(function() { 
 
    // Hint: in this implementation you even don't need to specify a class and write 
 
    // "$('a').click(function(oEvent) {" instead 
 
    $('.link').click(function(oEvent) { 
 
     var id = $(this).attr('href'), 
 
      $target = $(id); 
 
     if ($target.length) { // check if there is a valid target first @Hint 
 
      oEvent.preventDefault(); // Prevent default behavior of link 
 
      $('html,body').animate({ 
 
       scrollTop: $target.offset().top 
 
      }, 'slow'); 
 
      // return false prevents event from bubbling which isn't a good practice 
 
     } 
 
    }); 
 
});

#portfolio {/* just to make it visible */ 
 
    margin-top: 100vh; 
 
}

<!-- dont't forget to add your class "link" --> 
 
<a href="#portfolio" class="link"><button type="button" class="btn btn-lg btn-outline-info">Scroll down</button></a> 
 

 
<div id="portfolio" class="container pt-5"> 
 
    <div class="row d-flex justify-content-center"> 
 
    <img id="thumb" src="images/img/01.jpg" class="img-thumbnail m-2 img-responsive" width="300" height="200"> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

EDITでクラス "リンク" を追加するのを忘れ|高度なスニペット（スムーズスクロールが終了した後、URLにハッシュを付加）

$(function() { 
    $('body').click(function(oEvent) { 
     var $link = $(oEvent.target),$target, sUrl; 
     if ($link[0].hash || ($link = $link.closest('a'))[0].hash) { 
      $target = $($link[0].hash); 
      if ($target.length) { 
       oEvent.preventDefault(); 
       sUrl = window.location + $link[0].hash 
       $('html,body').animate(
        { scrollTop: $target.offset().top }, 
        'slow', 
        function() { window.location = sUrl; } // set new location 
       ); 
      } 
     } 
    }); 
}); 

あなたが/たいいくつかのより深いexplanantionsは私が知っている必要がある場合は...