webデザイン初心者|sometimes study

webデザイン初心者の私が一人前になるまでの記録。webデザイン(Illustrator・Photoshop)・webサイト制作(HTML・CSS・JavaScript・jQuery・PHP・WordPress)を中心にお勉強中。

超簡単&コピペでOK!ページトップへ戻るボタンの実装方法:jQuery

先週末まで2週間インターンシップに行っていたのでバタバタしてましたー!やっと落ち着いて来たので久しぶりの更新です。

 

今回は様々なところで見かける『スクロールして、ページトップに戻るボタン』の作り方です。


超簡単&コピペでOK!
ページトップへ戻るボタンの実装方法:jQuery

f:id:serinaishii:20151106144134p:plain

 

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;

});


});

 

 動作としては、下のような感じです。

  1. ページを表示したときは、ボタンが隠れていている(hide)
  2. 画面が80px以上スクロールされたら、ボタンが表示される
  3. ボタンが押されたら、スクロールして上に戻る

 

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』の記事