Follow @papepo100
    

ページトップへ戻るボタンの実装方法

ブログパーツ
0 0 2017/02/18
pagetop.png ページナビを画面上部に移動したのでページトップへのリンクを設置することにしました。
ある程度スクロールするとスーッとページトップへのリンクボタンが表示される仕組みがあったので紹介します 。
詳しくはコチラのページで説明されていますが、必要な個所だけ抜粋すると以下を実装すればよいだけです。








まずはテンプレートの<head>~</head>内に以下を追加します。(jquery.min.jsの追加は適宜行います。)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
var syncerTimeout = null ;

$(function() {v     $(window).scroll( function() {
        if( syncerTimeout == null ) {
            syncerTimeout = setTimeout( function() {
                var element = $( '#page-top' );
                var visible = element.is(':visible');
                var now = $(window).scrollTop();
                var under = $( 'body' ).height() - ( now + $(window).height() );
                if( now > 400 && 200 < under ) {
                    if( !visible ) {
                        element.fadeIn('slow');
                    }
                } else if( visible ) {
                    element.fadeOut('slow');
                }
                syncerTimeout = null;
            } , 1000 );
        }
    });

    $('#move-page-top').click(
        function() {
            $('html,body').animate({scrollTop:0} , 'slow');
        }
    );
});
</script>

テンプレートの<body>~</body>内に以下を追加します。
(テンプレートによりますが、このブログのテンプレートでは<!-- #l-main -->~<!-- /#l-main -->内に設置する必要がありました)
<div id="page-top" class="page-top">
<p><a id="move-page-top" class="move-page-top">▲</a></p>
</div>

スタイルシートに以下を追加します。
.page-top
{
    display: none ;
    margin: 0 ;
    padding: 0 ;
}

.page-top p
{
    margin: 0 ;
    padding: 0 ;

    position: fixed ;
    right: 27px ;
    bottom: 16px ;
}

.move-page-top
{
    display: block ;
    background: #D36015 ;
    width: 50px ;
    height: 50px ;
    cursor: pointer ;

    color: #fff ;
    line-height: 50px ;
    text-decoration: none ;
    text-align: center ;

    -webkit-transition:all 0.3s ;
    -moz-transition:all 0.3s ;
    transition:all 0.3s ;
}

@media screen and ( min-width:1130px )
{
    .move-page-top:hover
    {
        opacity: 0.85 ;
    }
}
スポンサーサイト
このエントリーをはてなブックマークに追加

コメント

非公開コメント