[チュートリアル]ページトップに戻るをスクロールしたら表示させる
ページトップに戻るですが、これを少しスクロールされたら表示させたら目につきやすくていいかもしれません。
小ネタですがサイトでよく使われる手法だと思いますので、覚えておいて損はないかと思います。
via:Animated Scroll to Top
sponsors
使用方法
jQueryからjquery.jsをダウンロードします。
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
//まずトップに戻るを消しておきます。
$("#back-top").hide();
//スクロールされたら
$(window).scroll(function () {
//100pxいったら
if ($(this).scrollTop() > 100) {
//トップに戻るをフェードイン
$('#back-top').fadeIn();
//100pxいかなかったら
} else {
//隠す
$('#back-top').fadeOut();
}
});
//トップに戻るをクリックしたら
$('#back-top a').click(function () {
//スムーズに上に戻る
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>
あとは、トップに戻るを上記の#back-topで記述します。
<p id="back-top"><a href="#top">上にもどれー</a></p>
またCSSで表示したい場所を指定することも可能です。
<style>
#back-top {
position: fixed;
bottom: 20px;
right:20px;
}
</style>
[チュートリアル]ページトップに戻るをスクロールしたら表示させるサンプル
sponsors
記事作成:2011年4月13日 13:15
記事URL:http://www.skuare.net/2011/04/post_21.html
TOP > javascript > UI関連 > [チュートリアル]ページトップに戻るをスクロールしたら表示させる
前の記事:画像の好きなとこを拡大させられるjQueryプラグイン「ax-zoomer」
次の記事:Facebookページにオリジナルコンテンツを追加できるアプリ7個
あなたにはこちもお勧め!
jQuery プラグインまとめ!