【jQuery】トップへスクロールして戻る動き(小ネタ)
今や定番の動き。
ページのトップへ移動するときにするするとスクロールする動き
いろいろとやり方は紹介されてますが、
IEで動かない記述もあったので、どのブラウザでも動くjQueryの記述メモ
どこかのサイトで見つけたIEで動かないやつ
以下の記述はいろんなとこで紹介されてて使ってましたが、
IEで見てみると動いてませんでした。。。
$('.toTop').click(function(){ $('body').animate({ scrollTop:0 },500); return false; });
scrollTopがieではなんちゃらみたいな解説を見かけましたが、
あまり内容分からなかったです。
IEでもしっかり動いてくれる記述
他にもいろいろ調べてみて、今はこの記述を定番に使ってます。
$('a[href^=#]').click(function(){ var speed = 500; //スピードの調整 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; });
これは
<a href="#">トップへ戻る</a>
というようにhref属性が#になっているものに適応されます。
href属性を#にするのと、
トップへスクロールさせないものまで#にしないように注意が必要。
スクロールでボタンを表示・非表示
トップへ戻るボタンを最初は隠しておき、
ある程度スクロールしたところで表示されるのも最近定番です。
必須まではいかないけど、よく使ってます。
//最初は非表示 $('.toTop').hide(); //スクロール値によって条件分岐 $(window).scroll(function(){ if ($(this).scrollTop() > 500){ $('.toTop').fadeIn(); } else{ $('.toTop').fadeOut(); } });
トップへスクロールは定番ですが、
そこまで深く記述を考えたことがないので、
他にもこんなのがあるとかあれば教えていただきたいです。