JavaScriptテックラボ

jQueryとjQuery.ScrollToプラグインを使ってトップに戻るボタンを作る

2011年10月7日

下にスクロールするとトップに戻るボタンが表示され、クリックするとスムーズにスクロールしながらトップに戻るというスクリプトを書きました。

まずはjQueryとそのプラグインjQuery.ScrollToをダウンロード。

http://flesler.blogspot.com/search/label/jQuery.ScrollTo
jQueryダウンロードページ

保存したファイルを読み込みます。

 
<script src="smoothscroll.js"></script>
<script src="jquery.js"></script>

次にjQuery.ScrollToを使ってトップに戻るボタンを実現するJSを書きます。
トップにある状態では表示されず、下にある程度スクロールしたらボタンが表示される仕様だと、だいたい次のようなソースになります。

 
<script>
// プラグイン
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min){
el.fadeIn(settings.fadeSpeed);
} else {
el.fadeOut(settings.fadeSpeed);
}
});
});
};
// usage http://flesler.blogspot.com/search/label/jQuery.ScrollTo
$(function() {
$('#top-link').topLink({
min: 400,
fadeSpeed: 200
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>

あとはHTMLとCSSを用意するだけです。
フッタあたりに次のようなリンクを作成します。
HREF属性には#top、ID属性にはtop-linkを指定します。

 
<a href="#top" id="top-link">Jump to the top</a>

CSSは最低限下記が設定しておけば問題ありません。

 
#top-link{
display:none;
position:fixed;
right: 10px; bottom: 100px;
}

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。