jQueryでウィンドウのスクロールに対応してTOPへをフェードイン表示する方法

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

jQueryを使い、ページのトップへスクロールして戻る「TOPへ」ボタンを、ウィンドウのスクロールに応じてフェードイン表示する方法。

実装例

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

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

サンプルページを半分ほど縦スクロールすると、「TOPへ」ボタンが、ウィンドウの右下にフェードインで現れる。
「TOPへ」ボタンをクリックすると、ページのトップへスクロールして戻り、「TOPへ」ボタンは、フェードアウトする。

ソースコード

JavaScript

<script type="text/javascript">
jQuery( function() {
jQuery( '#toTheTop' ).hide();
jQuery( window ).scroll( function () {
if( jQuery( window ).scrollTop() > ( jQuery( 'body' ).height() - jQuery( window ).innerHeight() ) / 2 ){
jQuery( '#toTheTop' ).fadeIn( 'slow' );
}else{
jQuery( '#toTheTop' ).fadeOut( '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: 20px;
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, スクロール, 逆引きパーマリンク