ページトップ
jqueryを使ったページトップの方法を検索すると直ぐヒットするが分かりにくい
サンプルページを見てソースを見ればhtmlを触ってる人なら分かる・・・はず
だけどcssを理解している人も少ない
でね・・・
jquery.min.jsを同じ階層に入れてcssを無視して簡単なソースを下記に書くね
<HEAD>
<TITLE></TITLE>
<style type="text/css">
<!--
/* page-top */
#page-top{
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a{
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#page-top a:hover{
text-decoration: none;
background: #999;
}
-->
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var showFlug = false;
var topBtn = $('#page-top');
topBtn.css('bottom', '-100px');
var showFlug = false;
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
if (showFlug == false) {
showFlug = true;
topBtn.stop().animate({'bottom' : '20px'}, 200);
}
} else {
if (showFlug) {
showFlug = false;
topBtn.stop().animate({'bottom' : '-100px'}, 200);
}
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
</style>
</HEAD>
<p id="page-top"><a href="#wrap">PAGE TOP</a></p>
</BODY>
</html>
っでアタイのビゴーレの目次のページを変更したのね
分りやすい説明だと自負してるのね (´∀｀o)
| 固定リンク
コメント