初心者でも分かる！jQuery「TOPへ戻るボタン」の作り方

HTML

<div id="page-top" class="page-top">
	<p><a id="move-page-top" class="move-page-top">▲</a></p>
</div>

CSS

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

	position: fixed ;
	right: 16px ;
	bottom: 16px ;
}
 
.move-page-top
{
	display: block ;
	background: #D36015 ;
	width: 50px ;
	height: 50px ;

	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 ;
}

.move-page-top:hover
{
	opacity: 0.85 ;
}

CSS

.move-page-top
{
	/* 〜省略〜 */
	-webkit-transition:all 0.3s ;
	-moz-transition:all 0.3s ;
	transition:all 0.3s ;
}

CSS

.page-top p
{
	/* 〜省略〜 */
	position: fixed ;
	right: 16px ;
	bottom: 16px ;
}

CSS

/* 〜追加分〜 */
.page-top
{
	display: none ;
}

jQuery

$( document ).ready( function()
{
	// ここに命令を書く
} ) ;

jQuery

$( function()
{
	// ここに命令を書く
} ) ;

jQuery

$( function()
{
	$( '#page-top' ).fadeIn( 'slow' ) ;
} ) ;

jQuery

$( window ).scroll(
	function()
	{
		$( '#page-top' ).fadeIn( 'slow' ) ;
	}
) ;

jQuery

// 最上部から現在位置までの距離を取得して、変数[now]に格納
var now = $( window ).scrollTop() ;

// 最上部から現在位置までの距離(now)が1500px以上だったら
if( now > 1500 )
{
	// [#page-top]をゆっくりフェードインする
	$( '#page-top' ).fadeIn( "slow" ) ;
}

// 1500px以下だったら
else
{
	// [#page-top]をゆっくりフェードアウトする
	$( '#page-top' ).fadeOut( 'slow' ) ;
}

jQuery

// 最上部から現在位置までの距離を取得して、変数[now]に格納
var now = $( window ).scrollTop() ;

// 最下部から現在位置までの距離を計算して、変数[under]に格納
var under = $( 'body' ).height() - ( now + $(window).height() ) ;

// 最上部から現在位置までの距離(now)が1500以上かつ
// 最下部から現在位置までの距離(under)が200px以上だったら
if( now > 1500 && 200 > under )
{
	// [#page-top]をゆっくりフェードインする
	$( '#page-top' ).fadeIn( 'slow' ) ;
}

// 1500px以下だったら
else
{
	// [#page-top]をゆっくりフェードアウトする
	$( '#page-top' ).fadeOut( 'slow' ) ;
}

jQuery

$( '#move-page-top' ).click(
	function()
	{
		// [id:move-page-top]をクリックしたら起こる処理
	}
) ;

jQuery

$( 'html,body' ).animate( {scrollTop:0} , 'slow' ) ;

jQuery

// [#page-top]が非表示状態かを調べる
var result = $( '#page-top' ).is(:hidden) ;

jQuery

// [#page-top]が非表示状態かを調べる
var result = $( '#page-top' ).is(:hidden) ;

// 非表示だった場合
if( result == true )
{
	// 処理 (出現させる)
}

// 非表示じゃなかった場合
else
{
	// 処理 (非表示にする)
}

jQuery

// グローバル変数
var timeOut = null ;

// [timeOut]が[null]の場合だけ処理をする
// ([timeOut]が[null]じゃない場合は処理をしない)
if( timeOut == null )
{
	// 1秒後に、処理を実行するようセットする
	timeOut = setTimeout(	// [timeOut]にsetTimeout()のID値を代入する (=とにかく[timeOut]の値が[null]じゃなくなる)
		function()
		{
			// 処理内容
			// ...

			// [timeOut]の値を[null]に戻す
			timeOut = null ;
		}
		, 1000		// 1000ミリ秒 = 1秒
	) ;
}