スクロールすると上へ戻る(GO TO TOP)にいくつか機能を加えてクイックドック(フッターナビ)風にしてみた

【この記事を読むのに必要な時間は約 8 分です。】

スクロールすると上へ戻るボタンは、JqueryプラグインやJavascriptを挿入して表示したりと様々な方法があり、数多くのサイトで紹介されている。
ところが、ページの一番下までスクロールするというのは、案外少ない。
今回、サイド部分に邪魔にならない程度で、上へ戻るボタンの他に「ページの下までスクロールする」ボタンを付けてみたのに加え、「ホーム」ボタン(トップページへジャンプ)や「コメントを残す」ボタンなどを付け加えてみた。
一定距離スクロールすると現れて、ある程度透過していて邪魔にならないようにすることを心がけた。
色々参考にして作ったので、どなたを参考にしたのか忘れてしまって申し訳ない。

HTML-Javascriptの記載

ヘッダー(<head>~</head>)部分に記載する。
なお、jquery本体はver2.0.3で動作確認している。今までjqueryを利用していない場合は、最初にjquery本体を利用できるようにしておく必要がある。

<!-- Jquery本体ホスティング -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- /Jquery本体ホスティング -->

スクロールトリガー、クリックエフェクト

もうさんざん紹介されていると思うがスクロールするとフェードインする仕組み。
これに「↑」ボタンをクリックしたらページトップへ、「↓」ボタンをクリックしたらページフッターへという機能を追加したのが以下。

<script type="text/javascript">
//初期は非表示
$("#side-dock").hide();

$(function () {
        //400pxスクロールしたらフェードインで全体を表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            $('#side-dock').fadeIn();
        } else {
            $('#side-dock').fadeOut();
        }
    });
        // 上へをクリックしたらページトップへ
    $('#nav_up').click(
        function (e) {
            $('html, body').animate({scrollTop: '0px'}, 1000);
        }
    );
    // 下へをクリックしたらページボトムへ
    $('#nav_down').click(
        function (e) {
            $('html, body').animate({scrollTop: $(document).height()}, 1000);
        }
    );
});
</script>

画像の切り替えエフェクト

今回は画像ファイルを切り替えて使用しているので、マウスオン時に画像がきりかわるようにした。

<script type="text/javascript">
// マウスを上に置くと画像を入れ替える
function chImg(img, str) {
  document.images[img].src = str;
}
</SCRIPT>

HTML-ボタンの表示部分の記載

画像ファイルを使用

今回は画像を利用している。
なお、テキストと背景をCSSで指定しても、上記スクリプトは利用できる。idを同じように付けてやればよい。

<ul id="side-dock" >
	<li><a id="nav_up" href="#nav_up" onMouseover="chImg('top','img/top_hover.jpg')" onMouseout="chImg('top','img/top.jpg')">
	<img src="img/top.jpg" id="top"></a></li>
	<li><a href="http://jump-up.info" onMouseover="chImg('home','img/home_hover.jpg')" onMouseout="chImg('home','img/home.jpg')">
	<img src="img/home.jpg" id="home"></a></li>
	<li><a href="https://twitter.com/jump_up_" onMouseover="chImg('twitter','img/twitter_hover2.jpg')" onMouseout="chImg('twitter','img/twitter.jpg')" target="_blank">
	<img src="img/twitter.jpg" id="twitter"></a></li>
	<li><a href="http://feeds.feedburner.com/http/jump-upinfo/feed" onMouseover="chImg('rss','img/rss_hover2.jpg')" onMouseout="chImg('rss','img/rss.jpg')" target="_blank">
	<img src="img/rss.jpg" id="rss"></a></li>
	<li><a href="#respond" onMouseover="chImg('comment','img/comment_hover.jpg')" onMouseout="chImg('comment','img/comment.jpg')">
	<img src="img/comment.jpg" id="comment"></a></li>
	<li><a id="nav_down" href="#nav_down" onMouseover="chImg('down','img/down_hover.jpg')" onMouseout="chImg('down','img/down.jpg')">
	<img src="img/down.jpg" id="down"></a></li>
	</ul>

Javascriptとの関係

#side-dock

「#side-dock」でフェードインする要素を指定している。名前は好きなものに変更してもかまわない。
今回は、<ul>にidを指定して全体のボックスを作った。この部分がフェードインする部分になる。

#nav-upと#nav-down

「#nav-up」でページトップへ戻る効果を、「#nav-down」でページボトムへ移動する効果を指定している。
「↑」と「↓」ボタンのリストに指定している。

画像の切り替えエフェクト

idを切り替え前と切り替え後の画像で同じにしてやれば良い。名前は好きなものでかまわない。

CSSへの記載

表示位置と、透過度合いを決めた。
今回は、<ul>リストを使った。位置は右下の適当なところに指定。
後、半透明にした。
リストは、見出し記号が付かないようにしないとおかしくなる。

#side-dock {
        list-style:none; //見出し記号は付けないようにする
        display:none;
	margin: 0 0 0 0;
	position: fixed;
	bottom: 20px; //フッターからの位置
	right: 20px; //右端からの位置
	opacity: 0.6; //全体の透過度合いを指定
}

デモ

デモを作成したので、こちらを見てほしい。
画像ファイル(png/jpg)もこちらからダウンロードできるので、サイズ変更、加工は自由に行って下さい。
WS000003
以上

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

  • このエントリーをはてなブックマークに追加

良かったらフォローお願いします。

コメント

  1. もんす より:

    初めまして。こちらのページのようなside-dockを常に表示状態にするにはどのようにすればいいのでしょうか?