サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。
$(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つで、指定した"値"が属性の値と前方一致する要素を選択する、というものらしいです。
つまり、$([href^="#"])とすることで、href属性が "#" で始まる要素を取得することができます。
ちなみにjQueryのバージョンによっては#を""で囲まないと動作しないことがあるので、"#"とする方が無難です。
なので、このままでは、
<a href="#〇〇">
といったリンク全てにスムーススクロールのアニメーションがかかってしまうので、除外したいa要素には除外用のクラス名を指定しましょう。
$(function(){ $('a[href^=#]:not(a.notscroll)').on('click',function(){ var speed = 400; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); });
場合によってはある程度スクロールしてから表示させたい場合もあります。
その場合、まず「.hide」で見せなくさせて、ある条件（今回の場合は何pxスクロールしたら）になったら、
「.fadeIn」で表示させ、ある条件以外の時は「.fadeOut」で非表示にさせましょう。
scrollイベント
要素がスクロールした時のイベントとして関数を指定できます。
scrollTopイベント
「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置の上部までのピクセル数を取得します。
位置の取得
position()は、親要素から見た座標を取得します。 offset()は、親要素関係なく、documentから見た座標を取得します。
さらに複数回使う要素は変数に置き換えた方が効率的なので記述するパターンも覚えておきましょう。
以下はターゲット要素より、50px上にスクロールするサンプルです。
var position = target.offset().top - 50;
ある程度スクロールしたらボタンを表示させる
$('#to_top').hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#to_top').fadeIn();
} else {
$('#to_top').fadeOut();
}
});
