ページトップまでスムースにスクロールさせる

スムーススクロール

jQueryを使用してページトップまでスムースにスクロールさせます。jQueryプラグインを使うより簡単で軽い処理ですみます。

ソースファイル

HTML

<p><a id="to-top" href="#top">トップに戻る</a></p>

JS

<script>
$(function(){
  $('#to-top').on('click',function(){
    $('html,body').animate({scrollTop: 0},1000,'swing');
  });
});
</script>

 

’1000’はトップに行くまでにかかる時間。

’swing’は最初はゆっくり、トップに向かって速くなる戻り方です。