よくある Back to Top ボタンの作成例

ブログとかでページ右下あたりによくある 「Back to Top」 ボタンを作ってみました。

DEMO

• http://jsfiddle.net/polygonplanet/fFJzq/show/

ページを開いてスクロールすると、右下に「Back to Top」ボタンが現れます。 ボタンをクリックしてページ上部までスクロールします。 今回は jQuery を使ってみたら、ごくありがちなボタンになってしまいました。 もしかしたら多少クリックしずらいかもしれません。

サンプルコード

※以下はDEMOを簡略化するため多少コード変更しています

HTML:

view plainprint?

1. <div class="back-to-top">Back to Top</div>  

<div class="back-to-top">Back to Top</div>

JavaScript:

view plainprint?

1. $(function() {  
2.   var backToTop = $('.back-to-top');  
3.   
4.   // クリックでページ上部までスクロール  
5.   backToTop.hide().on('click', function() {  
6.     $('html,body').animate({  
7.       scrollTop: 0  
8.     }, 800);  
9.     return false;  
10.   });  
11.   
12.   // スクロール位置がページ上部じゃなかったら表示  
13.   $(window).on('scroll', function() {  
14.     if ($(this).scrollTop() < 10) {  
15.       backToTop.hide();  
16.     } else {  
17.       backToTop.show();  
18.     }  
19.   });  
20.   
21. });  

$(function() {
  var backToTop = $('.back-to-top');

  // クリックでページ上部までスクロール
  backToTop.hide().on('click', function() {
    $('html,body').animate({
      scrollTop: 0
    }, 800);
    return false;
  });

  // スクロール位置がページ上部じゃなかったら表示
  $(window).on('scroll', function() {
    if ($(this).scrollTop() < 10) {
      backToTop.hide();
    } else {
      backToTop.show();
    }
  });

});

CSS:

view plainprint?

1. .back-to-top {  
2.   display: none;  
3.   position: fixed;  
4.   bottom: 10px;  
5.   right: 10px;  
6.   width: 100px;  
7.   height: 40px;  
8.   background: rgba(255, 64, 64, 0.7);  
9.   color: rgba(255, 255, 255, 0.9);  
10.   line-height: 3;  
11.   text-align: center;  
12.   font-size: 13px;  
13.   font-weight: bold;  
14.   font-family: verdana, sans-serif;  
15.   cursor: pointer;  
16.   z-index: 9999;  
17. }  
18.   
19. .back-to-top:hover {  
20.   background: rgba(255, 16, 16, 0.8);  
21.   color: rgba(255, 255, 64, 0.8);  
22. }  

.back-to-top {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 100px;
  height: 40px;
  background: rgba(255, 64, 64, 0.7);
  color: rgba(255, 255, 255, 0.9);
  line-height: 3;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  font-family: verdana, sans-serif;
  cursor: pointer;
  z-index: 9999;
}

.back-to-top:hover {
  background: rgba(255, 16, 16, 0.8);
  color: rgba(255, 255, 64, 0.8);
}

お好みで変更してください。

まとめ

真面目なページに突然こんなんがあったら嬉しくなりそう

/show/ じゃないほうの jsFiddle:

• http://jsfiddle.net/polygonplanet/fFJzq/

Contact

• http://twitter.com/polygon_planet
• http://polygonpla.net/