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

投稿日: 2013年9月10日作成者: alphasis

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

実装例

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

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

サンプルページを半分ほど縦スクロールすると、「TOPへ」ボタンが、上へのスライドアニメーションでウィンドウの右下に現れる。
「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, スクロール, 逆引きパーマリンク