超簡単&コピペでOK!ページトップへ戻るボタンの実装方法:jQuery
先週末まで2週間インターンシップに行っていたのでバタバタしてましたー!やっと落ち着いて来たので久しぶりの更新です。
今回は様々なところで見かける『スクロールして、ページトップに戻るボタン』の作り方です。
超簡単&コピペでOK!
ページトップへ戻るボタンの実装方法:jQuery
jQuery初心者さんが、まず1番最初にやりたいのはこの『トップページへ戻るボタン』なはず!!!
なぜなら私がそうだったから! !
ボタンを押すとスーっと上に移動してくれる。この動きがたまらなく気持ちいい。
このブログにも最近やっと実装しましたが、クセになりますよね。
ページが縦に長くなりがちな方はぜひぜひ設置してみてくださいませ。
demo
このブログがまさにdemoページそのものです!トップページから少しスクロールすると、右下に出てくる水色のボタンです。動きを試してみてください。
『ページトップへ戻るボタン』を知った当初は動きが楽しくて
"スクロールしてはポチっとしてスーっ"
"スクロールしてはポチっとしてスーっ"
と、つい何度もポチポチしてしまいました(笑)
HTML
<p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p>
HTMLはたったの1行です!footer手前にでも書いておいてくださいませ。
- 「<i class="fa fa-chevron-up"></i>」:fontawsomeのアイコンフォントで「 ∧ 」みたいな記号を表示しています。
[ ↓ ] fontawsomeに興味のある方は、過去記事を参考にしてみてください。
- 「page top」などの文字を表示したい場合は、以下のようにしてください。
<p id="pageTop"><a href="#">page top</a></p>
jQuery
//■page topボタン
$(function(){
var topBtn=$('#pageTop');
topBtn.hide();
//◇ボタンの表示設定
$(window).scroll(function(){
if($(this).scrollTop()>80){//---- 画面を80pxスクロールしたら、ボタンを表示する
topBtn.fadeIn();}else{
//---- 画面が80pxより上なら、ボタンを表示しない
topBtn.fadeOut();}
});
// ◇ボタンをクリックしたら、スクロールして上に戻る
topBtn.click(function(){
$('body,html').animate({
scrollTop: 0},500);
return false;});
});
動作としては、下のような感じです。
- ページを表示したときは、ボタンが隠れていている(hide)
- 画面が80px以上スクロールされたら、ボタンが表示される
- ボタンが押されたら、スクロールして上に戻る
jQueryのことがよくわからない方へ
jQueryは事前に、プログラムを動かすためのソースを読み込んでおかないと動ごきません。
わからない人はとりあえず<head>部分に下のコードを記述しておいてください。
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
jQueryの記述自体はjsファイル内に記述するか、HTML側のbody内の1番下にエンベット(「<script></script>」の中にコードを書き込む方法)でOKです。
CSS
#pageTop {
position: fixed;
bottom: 20px;
right: 20px;
}
#pageTop i {
padding-top: 6px
}
#pageTop a {
display: block;
z-index: 999;
padding: 8px 0 0 8px;
border-radius: 30px;
width: 35px;
height: 35px;
background-color: #9FD6D2;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}
#pageTop a:hover {
text-decoration: none;
opacity: 0.7;
}
CSSで丸いアイコンにしていますが、四角くしたり、色を変えたりはご自由に!
また、スタイルを当てないで画像で表示してしまうのもいいですね!!
実際に運用しているページはこちら
私が過去に作ったwebサイトで、実際に『ページトップへ戻るボタン』を使っているサイトはこちらです。良ければ参考にしてください。
画像でページトップへ戻る
CSS・四角いスタイルでページトップへ戻る
最後に
よく使う『ページトップへ戻るボタン』難しいと思っていたけど、実はコピペでささっとできちゃうのです(*^^*)
ユーザビリティも向上するし!なんか動きがかわいいし!スーってなるの気持ちいいし!
ぜひぜひご自分のサイトにも実装してみてください。
どうしてもうまく動かない方は、下記のコードをまるっとhtmlファイルにコピペしてみてください。
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<html>
<body>
<pre>
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
スクロール用の仮テキスト
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
</pre>
<p id="pageTop"><a href="#"><i class="fa fa-chevron-up "></i></a></p>
<style>
/*-- CSSの記述 --*/
#pageTop {
position: fixed;
bottom: 20px;
right: 20px;
}
#pageTop i {
padding-top: 6px
}
#pageTop a {
display: block;
z-index: 999;
padding: 8px;
border-radius: 30px;
width: 35px;
height: 35px;
background-color: #9FD6D2;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}
#pageTop a:hover {
text-decoration: none;
opacity: 0.7;
}
</style>
<script>
// Javascriptの記述
//■page topボタン
$(function(){
var topBtn=$('#pageTop');
topBtn.hide();
//◇ボタンの表示設定
$(window).scroll(function(){
if($(this).scrollTop()>80){
//---- 画面を80pxスクロールしたら、ボタンを表示する
topBtn.fadeIn();
}else{
//---- 画面が80pxより上なら、ボタンを表示しない
topBtn.fadeOut();
}
});
// ◇ボタンをクリックしたら、スクロールして上に戻る
topBtn.click(function(){
$('body,html').animate({
scrollTop: 0},500);
return false;
});
});
</script>
</body>
</html>
合わせて読みたい『ちょこっとjQuery』の記事