https://etm-yksk.jp/js/to-top.js

1/********************************************************************************
2
3	SYNCER 〜 知識、感動をみんなと同期(Sync)するブログ
4
5	* 配布場所
6	https://syncer.jp/jquery-to-top-button
7
8	* 最終更新日時
9	2015/08/17 11:23
10
11	* 作者
12	あらゆ
13
14	** 連絡先
15	Twitter: https://twitter.com/arayutw
16	Facebook: https://www.facebook.com/arayutw
17	Google+: https://plus.google.com/114918692417332410369/
18	E-mail: [email protected]
19
20	※ バグ、不具合の報告、提案、ご要望など、お待ちしております。
21	※ 申し訳ありませんが、ご利用者様、個々の環境における問題はサポートしていません。
22
23********************************************************************************/
24
25
26// グローバル変数
27var syncerTimeout = null ;
28
29// 一連の処理
30$( function()
31{
32	// スクロールイベントの設定
33	$( window ).scroll( function()
34	{
35		// 1秒ごとに処理
36		if( syncerTimeout == null )
37		{
38			// セットタイムアウトを設定
39			syncerTimeout = setTimeout( function(){
40
41				// 対象のエレメント
42				var element = $( '#page-top' ) ;
43
44				// 現在、表示されているか？
45				var visible = element.is( ':visible' ) ;
46
47				// 最上部から現在位置までの距離を取得して、変数[now]に格納
48				var now = $( window ).scrollTop() ;
49
50				// 最下部から現在位置までの距離を計算して、変数[under]に格納
51				var under = $( 'body' ).height() - ( now + $(window).height() ) ;
52
53				// 最上部から現在位置までの距離(now)が1500以上かつ
54				// 最下部から現在位置までの距離(under)が200px以上かつ…
55				if( now > 100 )
56				{
57					// 非表示状態だったら
58					if( !visible )
59					{
60						// [#page-top]をゆっくりフェードインする
61						element.fadeIn( 'slow' ) ;
62					}
63				}
64
65				// 1500px以下かつ
66				// 表示状態だったら
67				else if( visible )
68				{
69					// [#page-top]をゆっくりフェードアウトする
70					element.fadeOut( 'slow' ) ;
71				}
72
73				// フラグを削除
74				syncerTimeout = null ;
75			} , 1000 ) ;
76		}
77	} ) ;
78
79	// クリックイベントを設定する
80	$( '#move-page-top' ).click(
81		function()
82		{
83			// スムーズにスクロールする
84			$( 'html,body' ).animate( {scrollTop:0} , 'slow' ) ;
85		}
86	) ;
87} ) ;