うろぐ

インターネットサービス&デジタル家電&デジタルカメラ&パソコンのレビュー

jQueryを使ってページのトップに戻るボタンを作成しました。
テキストで「トップ」や「TOP」と書いても良いのですが、矢印画像を使うと少しだけおしゃれになります。
以下、そのソースです。

bodyタグ内の任意の位置にページのトップに戻るリンクトップの戻り先のリンクを書きます


<p id="pageTop" style="display: block;"><a href="#top"></a></p>

通常はaタグに「TOP」とテキストを記入するのですが、ここでは画像を表示させるのでブランクにしています。
ちなみに、このpタグのリンクは/bodyタグの直前、footerの一番下に書きました。


<a id="top"></a>

ページの一番上、bodyタグの直下に書きます。

JavaScriptのソースです
上記で設定したidのpageTopを書きます。


<script>
$(function() {
	var showFlug = false;
	var topBtn = $('#pageTop');	
	topBtn.css('bottom', '-100px');
	var showFlug = false;
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			if (showFlug == false) {
				showFlug = true;
				topBtn.stop().animate({'bottom' : '20px'}, 200); 
			}
		} else {
			if (showFlug) {
				showFlug = false;
				topBtn.stop().animate({'bottom' : '-100px'}, 200); 
			}
		}
	});
	//スクロールからトップへ
    topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
    });
});
</script>

cssのソースです。
デザインはcssで制御した方が楽です。


/* ページのトップに移動 */
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
#pageTop a {
	background: #eee;
	text-decoration: none;
	width: 50px;
	padding: 30px 0;
	display: block;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background: url(./cssImg/pageTop.png) right center no-repeat;
}
/* //ページのトップに移動 */

文字では無く画像でトップに戻るボタンを表示させるので、backgroundでpngのイメージを引き出しています。
当たり前ですが、画像のみの表示なので、テキストを制御するソースは書かれていません。

矢印の画像はNext icons - Download 1050 free & premium icons on Iconfinderから取得しました。無料のアイコンが選べます。

3月 2nd, 2015

Posted In: JavaScript, Responsive Web Design