2015年03月7日

プラグインなし jQueryのトップへ戻るボタン 超シンプル版

画像も使っていないCSSとjQueryのみのトップへ戻るボタンのソース。
アレンジしやすいようにシンプルソース、コピペ用。

jQueryのソース
jqueryを読み込んだ後に以下を記述。
</body>の直前などに。

<script type="text/javascript">
jQuery(function(){
  jQuery( "#pagetop" ).click(function() {
     jQuery("body, html").animate({scrollTop: 0}, 800);
     return false;
  });
});
</script>

CSSソース

#pagetop {
position: fixed;
right:100px;
bottom:50px;
z-index: 100;
width: 60px;
height: 60px;
background: #AADAF2;/*背景色*/
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#pagetop:hover {/*マウスオーバー時*/
background:#F7AABB;/*背景色*/
cursor:pointer;
}
.triangle {/*三角の部分*/
width:0;
height:0;
border:transparent 15px solid;
border-bottom:#756F61 25px solid;
margin:auto;
}

HTMLソース

<div id="pagetop" title="トップへ"><div class="triangle"></div></div>