jQuery
Pocket

今や定番の動き。
ページのトップへ移動するときにするするとスクロールする動き

いろいろとやり方は紹介されてますが、
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();
	}
});

トップへスクロールは定番ですが、
そこまで深く記述を考えたことがないので、
他にもこんなのがあるとかあれば教えていただきたいです。

Pocket

Category : Tag :