サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。
$(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); });
複数の場所にスムーススクロールで移動させたい場合
$(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^="#"]').on('click',function() { // スクロールの速度 var speed = 400; // ミリ秒 // 移動先を取得 var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); });
注意しなければいけないのは、古い書き方だとjqueryの1.12.0以上だと動かないので、必ず正しい記述をしましょう。
間違った記述
$('a[href^=#]')
正しい記述
$('a[href^="#"]')
スクロールメソッド
スクロールした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたスクロール時の処理を実行します。
scrollTop( )
引数を設定しない場合は、jQueryオブジェクトで指定した要素のスクロール位置(Y座標)を取得します。
スクロールが300pxに達したらボタンを表示
$('.scroll-btn').hide(); $(window).scroll(function () { if ($(this).scrollTop() > 300) { $('.scroll-btn').fadeIn(); } else { $('.scroll-btn').fadeOut(); } });