jQueryでウィンドウのスクロールに対応してTOPへをスライドアニメーション表示する方法

jQueryを使い、ウィンドウの縦スクロールを半分程スクロールすると、ページのトップへスクロールして戻る「TOPへ」ボタンを、スライドアニメーションで右下に表示させる方法。

実装例

実装例は、サンプルページにて。

実装例(サンプルページ)の動作について

  1. サンプルページを半分ほど縦スクロールすると、「TOPへ」ボタンが、上へのスライドアニメーションでウィンドウの右下に現れる。
  2. 「TOPへ」ボタンをクリックすると、ページのトップへスクロールして戻り、「TOPへ」ボタンは、下へのスライドアニメーションで消える。

ソースコード

JavaScript

<script type="text/javascript">
jQuery( function() {
    var $flag = false;
    jQuery( window ).scroll( function () {
        var $scrollTopRatio = Math.round( jQuery( window ).scrollTop() / ( jQuery( 'body' ).height() - jQuery( window ).innerHeight() ) * 100 );
        if( $scrollTopRatio > 50 && $flag == false ){
            $flag = true;
            jQuery( '#toTheTop' ).animate( { 'bottom' : '20px' }, 'slow' );
        }else if( $scrollTopRatio <= 50 && $flag == true ){
            $flag = false;
            jQuery( '#toTheTop' ).animate( { 'bottom' : '-100px' }, 'slow' );
        }
    } );
    jQuery( '#toTheTop' ).click( function () {
        jQuery( window ).scrollTop( 0 ).scrollLeft( 0 );
    } );
} );
</script>

使用している主なjQuery api

HTML

<p id="toTheTop">TOPへ</p>

CSS

<style>
#toTheTop {
    position: fixed;
    bottom: -100px;
    right: 20px;
    display: block;
    width: 80px;
    margin: 0;
    padding: 20px 10px;
    background-color: gold;
    color: red;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}
</style>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, スクロール, 逆引き パーマリンク