JavaScriptテックラボ

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

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

まずは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) {
&Tab;settings = jQuery.extend({
&Tab;&Tab;min: 1,
&Tab;&Tab;fadeSpeed: 200
&Tab;}, settings);
&Tab;return this.each(function() {
&Tab;&Tab;var el = $(this);
&Tab;&Tab;el.hide();
&Tab;&Tab;$(window).scroll(function() {
&Tab;&Tab;&Tab;if($(window).scrollTop() >= settings.min){
&Tab;&Tab;&Tab;&Tab;el.fadeIn(settings.fadeSpeed);
&Tab;&Tab;&Tab;} else {
&Tab;&Tab;&Tab;&Tab;el.fadeOut(settings.fadeSpeed);
&Tab;&Tab;&Tab;}
&Tab;&Tab;});
&Tab;});
};

// usage http://flesler.blogspot.com/search/label/jQuery.ScrollTo
$(function() {
&Tab;$('#top-link').topLink({
&Tab;&Tab;min: 400,
&Tab;&Tab;fadeSpeed: 200
&Tab;});
&Tab;$('#top-link').click(function(e) {
&Tab;&Tab;e.preventDefault();
&Tab;&Tab;$.scrollTo(0,300);
&Tab;});
});
</script>

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

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

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

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

\ 30日間のお試し期間あり/

無料でKindle Unlimitedを試してみる

※Amazonアカウントですぐに登録可能。いつでも解約できます

関連記事