html
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Topページへ移動するボタンのサンプル</title>
<link type="text/css" href="css/cmn_layout.css" rel="stylesheet" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/cmn_pagetop.js"></script>
</head>
<body>
<header id="header">
<div class="pageTop" style="display: none;">
<p><a href="#header"><img src="img/btn_pagetop01.png" alt="pagetop" class="noPrint"></a></p>
</div>
<div class="contents">
<div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div><div>hoge</div>
</div>
</body>
</html>
javascript
$(function(){
jQuery.fn.extend({
pageTop: function(){
var $obj = $(this);
var conf = {
// トップへの表示を開始するスクロール位置
viewScrollTop: 1
}
// メイン処理
var main = function(){
changeView();
// スクロールイベント
$(window).scroll(function(){
changeView();
});
}
// スクロール位置によって表示を切り替える
var changeView = function() {
if ($(window).scrollTop() > conf.viewScrollTop) {
$obj.show();
} else {
$obj.hide();
}
}
main();
}
});
$(function(){
$(".pageTop").pageTop();
});
});
cmn_layout.css
@charset "UTF-8";
/* pageTop
---------------------------------------------------------- */
.pageTop {}
.pageTop p {
z-index: 99999;
position: fixed;
right: 80px;
bottom: 50px;
display: inline-block;
}
.pageTop p a { display: block;}
.pageTop p a:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
-webkit-opacity: 0.7;
}
/* contents
---------------------------------------------------------- */
.contents{
border: 1px solid #aaa;
width: 400px;
text-align: center;
}