下へスクロールすると
「トップページへ戻る」のアイコンを少し表示。
クリックしようとすると アイコン全体を表示する
ちょっと可愛いjQery
参考サイト
jQueryでページトップへ戻るを実装!初心者でも超簡単作成
「トップページへ戻る」のアイコンを少し表示。
クリックしようとすると アイコン全体を表示する
ちょっと可愛いjQery
参考サイト
jQueryでページトップへ戻るを実装!初心者でも超簡単作成
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>無題ドキュメント</title>
</head>
<!--CSS-->
<style type="text/css">
/*コンテナの設定
[CSSルール] ヘッダー、コンテンツ、フッターを全てコンテナの中に入れる
------------------------------------*/
.container{
width: 100%;
}
header {
height: 100px;
margin: 0;
padding: 0;
background-color:#FCF;
}
.content {
width:1000px;
height:2000px;
margin: 0 auto;
padding: 0;
background-color:#F9F;
}
/*トップに戻るボタンの設定
------------------------------------*/
#pagetop{
position:fixed;
left: 80%; ← カスタム:画面全体を100%とし、アイコンを左から80%に表示させる
bottom:-156px; ← カスタム:アイコンをベースラインより156ピクセル下にさげて画面から見えなくする
cursor:pointer;
}
footer{
width:100%;
min-height: 103px;
background-color:#C3F;
text-align: center;
}
</style>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
//ページトップへのスクロール
$('#pagetop').click(function () {
//id名#pagetopがクリックされたら、以下の処理を実行
$("html,body").animate({scrollTop:0},"300");
});
//ページトップの出現
$('#pagetop').hide();
$(window).scroll(function () {
if($(window).scrollTop() > 0) {
$('#pagetop').slideDown(600);
} else {
$('#pagetop').slideUp(600);
}
});
//ホバーイベント
$("#pagetop").mouseover(function(){
$(this).animate({
bottom:"0px"
},300);
});
$("#pagetop").mouseout(function(){
$(this).animate({
bottom:"-156px" ← カスタム:アイコンをベースラインより156ピクセル下にさげて画面から見えなくする
},300);
});
});
</script>
<body>
<!--HTML bodyに設定-->
<div class="container">
<header>ヘッダー</header>
<div class="content">コンテンツ</div>
<!--トップへ戻るボタン設定-->
<div id="pagetop">
<img src="temp_img/icon_top_btn.png" width="140" height="246" />
</div>
<!--トップへ戻るボタン設定-->
<footer>フッター</footer>
</div><!--container end-->
</body>
</html>
コメント