jqueryでトップページへ戻るを作る

jquery 
#pageTop{
  font-weight : bold;
  font-size   : 10px;
  background  : rgba(82,74,63,0.7);
  -webkit-border-radius : 3px;
     -moz-border-radius : 3px;
       -o-border-radius : 3px;
          border-radius : 3px;
  color                 : #ffffff;
  padding               : 40px 5px 5px 5px;
  position              : fixed;
  bottom                : 60px;
  right                 : 30px;
  z-index               : 30;
}
#pageTop:hover{
  backgrond : rgba(102,94,83,0.5);
}
#pageTop:before{
  display : block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  top        : 50%;
  left       : 29px;
  width      : 15px;
  height     : 15px;
  margin-top :-12px;
  border-top : white 4px solid;
  border-left: white 4px solid;
  -webkit-border-top-left-radius: 4px;
     -moz-border-top-left-radius: 4px;
        o-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
}

footerにページトップへのリンクを記述する

<a id="pageTop" href="#contents">ページトップへ</a>
  • pagetop.jsとして保存しheaderで読み込む。

javascriptは参考サイトのものをそのまま使用させてもらいました。

<script type="text/javascript">
$(function() {
    var topBtn = $('#pageTop');
    topBtn.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 1000);
        return false;
    });
});
</script>

参考