jQueryで作るスクロールしたら出現してスクロールに追随し、フッターの位置で止まるスムーススクロール

jQueryで作るスクロールしたら出現してスクロールに追随し、フッターの位置で止まるスムーススクロール

言葉で説明すると難しいのですが、よくあるスクロールすると「ページトップへ」のボタンが出現して、そのままスクロールに合わせてついてくるものを、そのままページ下までついてこさせずにフッターの位置で止める方法です。IEはバージョン7以上で動きました。

サンプル」を作りましたのでこちらをご覧頂ければわかりやすいかもしれません。

(サンプルデモのコードは一番下にあります。)

「フッターの位置で止める」という動作は以下のサイトを参考にさせて頂きました。とても参考になりました。ありがとうございました!

スムーススクロールの部分は、有名なwebdesignerwallさんのコード”Animated Scroll to Top”を参考にさせて頂いています。

ページトップボタンのHTML

ページトップボタンのHTMLは以下のようにします。

<p class="gotop">
	<a href="#">
	<img src="images/gotop.png" alt="ページトップへ戻る">
	</a>
</p>

CSS

ページを包んでいる一番親の要素へrelativeを設定します。

#container{
	position: relative;
}

ボタンのCSSは以下のように position を fixed にして固定し、位置を指定します。

p.gotop{
	position: fixed;
	right: 5%;
        bottom: 0;
}
p.gotop a{
	width: 125px;
	height: 94px;
	display: block;
}

jQueryのコード

jQuery本体をヘッダー内で読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

続けてヘッダー内または外部のJsファイルへ以下のように記入します。

フッターの高さを取得し、現在のスクロール位置がフッターの高さに入ったら、ページトップボタンのCSSを fixed から absolute に変更してフッターの高さの位置に固定しています。

<script>
$(document).ready(function(){

    $(".gotop").hide();
     // ↑ページトップボタンを非表示にする

	$(window).on("scroll", function() {

        if ($(this).scrollTop() > 100) {
            // ↑ スクロール位置が100よりも小さい場合に以下の処理をする
			$('.gotop').slideDown("fast");
            // ↑ (100より小さい時は)ページトップボタンをスライドダウン
        } else {
            $('.gotop').slideUp("fast");
            // ↑ それ以外の場合の場合はスライドアップする。
        }
        
    // フッター固定する

		scrollHeight = $(document).height(); 
		// ドキュメントの高さ
		scrollPosition = $(window).height() + $(window).scrollTop(); 
		// ウィンドウの高さ+スクロールした高さ→ 現在のトップからの位置
		footHeight = $("footer").innerHeight();
		// フッターの高さ
				
		if ( scrollHeight - scrollPosition  <= footHeight ) {
		// 現在の下から位置が、フッターの高さの位置にはいったら
		//  ".gotop"のpositionをabsoluteに変更し、フッターの高さの位置にする		
			$(".gotop").css({
				"position":"absolute",
				"bottom": footHeight
			});
		} else {
		// それ以外の場合は元のcssスタイルを指定
			$(".gotop").css({
				"position":"fixed",
				"bottom": "0px"
			});
		}
	});

	// トップへスムーススクロール
	$('.gotop a').click(function () {
		$('body,html').animate({
		scrollTop: 0
	    }, 500);
	    // ページのトップへ 500 のスピードでスクロールする
	    return false;
	 });

});
</script>

フッター部分にページトップボタンがかぶって見づらくなるような場合などによいと思います。

サンプルデモのコード

サンプルのヘッド内jQuery部分のHTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $(".gotop").hide();

	$(window).on("scroll", function() {

        if ($(this).scrollTop() > 100) {
	     $('.gotop').slideDown("fast");
        } else {
            $('.gotop').slideUp("fast");
        }
      
		scrollHeight = $(document).height(); 
		scrollPosition = $(window).height() + $(window).scrollTop(); 
		footHeight = $("footer").innerHeight();
				
		if ( scrollHeight - scrollPosition  <= footHeight ) {
			$(".gotop").css({
				"position":"absolute",
				"bottom": footHeight
			});
		} else {
			$(".gotop").css({
				"position":"fixed",
				"bottom": "0px"
			});
		}
	});

	$('.gotop a').click(function () {
		$('body,html').animate({
		scrollTop: 0
	    }, 500);
	    return false;
	 });
});
</script>

サンプルのbody内のコード

<div id="container">
<header id="header">
	<h1>ページトップへ戻るボタンをフッターに固定するサンプルデモ|memocarilog</h1>
</header><!-- fin_header -->

<div id="content">
	<p><a href="#">● 元のページへ戻る</a></p>
	<p>下へスクロール</p>	
	<p>↓</p>
	<p>↓</p>
	<p>↓</p>
</div>

<p class="gotop">
	<a href="#"><img src="images/gotop.png" alt="ページトップへ戻る"></a>
</p>

<footer id="footer">
		<p class="copy"><small>Copyright&copy;2013 memocarilog.All Right Reserved</small></p>
</footer><!-- footer -->
</div><!--container-->
</body>

サンプルのレイアウト部分のCSS

h1{
	font-size: 2em;
	line-height: 1.3;
	padding: 80px 0 150px;
	color: #D25C3E;
	text-shadow: 0px 1px 1px #FFEFD5;
}
#container{
	width: 100%;
	background: url(images/bg.png);	
	position: relative;
}
#header{
	width: 700px;
	margin: 0 auto;	
}
#content{
	width: 700px;
	height: 1200px;	
	margin: 0 auto;
	text-align: center;
}
#content p{
	color:#fff;
	font-weight: bold;
	margin-bottom: 150px;
	text-shadow: 0px 1px 1px #ccc;
}
#content p a{
	color:#F7B797;
	text-decoration: none;	
	text-shadow: 0px 1px 1px #fff;
}
#content p a:hover{
	color:#D25C3E;
}
.gotop{
	position: fixed;
	left: 50%;
	bottom: 0;
	margin:0 0 0 -63px;
}
.gotop a{
	width: 125px;
	height: 94px;
	display: block;
}
#footer{
	min-height: 273px;
	background: url(images/foot_back.png) repeat-x;
	text-align: center;
}
#footer .copy {
	padding-top:150px;
}
#footer .copy small{
	color: #fff;
	font-size: 14px;
}

Related Article

9 Comments & Tracbacks

  • trobot 2013-10-10 4:30 PM

    便利なスクリプトありがとうございます。
    ページ上部に行くと矢印ボタンが消えますが、ボタン以外の領域をクリックしても矢印ボタンが消えるようにするにはどうすればいいのでしょうか。ずっとボタンが見えないようにしたいです。
    http://sukobuto.com/archives/261
    を読んでJSに追記してみましたが反映されませんでした・涙

    Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル 素材 コンテンツ Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ