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から取得しました。無料のアイコンが選べます。
mizunuma 3月 2nd, 2015
Posted In: JavaScript, Responsive Web Design