おぼえられないから

ただただ自分の覚え書きのためです。

個人的な覚書なので見ても役に立ちませんよ。

下へスクロールすると
「トップページへ戻る」のアイコンを少し表示。
クリックしようとすると アイコン全体を表示する
ちょっと可愛い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>

コメント

コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット