スクロールでtopへ戻るボタンを表示するjQueryコード(スムーススクロール)

(”追記”書きました。)

下にスクロールすると横にtopへ戻るボタンを表示させるjQueryのコードのチュートリアルが公開されていましたのでメモ。

チュートリアルページ→webdesignerwall
チュートリアルdemo→demo

上記のページに設置方法も詳しくのっています。デモコードと画像のダウンロードもできます。
チュートリアルページに公開されているCSSのコードとjQueryのコードをヘッド内で読み込み、
下記の例のように、body内のスクロールさせたい要素に”back-top”とidをふり空のspanを入れます。

<p id="back-top">
<a href="#top"><span></span>Back to Top</a>
</p>

このspanの部分がスクロールボタンになります。

CSSをいじればスクロールボタンの位置やデザインなど変更できます。

↓↓Demoを作りました
デモページ

チュートリアルのものよりシンプルにし、ホバー時の変化等もなくし画像だけにしました。

<!ーー 2013/02/11追記 ーー>

webdesignerwallさんのコードをそのまま使った場合に、ページトップへ戻る際のアニメーションに不具合が起こるとご指摘頂きました。
以下のようにアニメーションの fadeout() に stop() を追加する事で回避できます。
(教えて頂きありがとうございました!)

$(document).ready(function(){
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').stop(true, true).fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});

<!ーー 2013/02/11追記ここまで ーー >

下記head内のコードです

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Back to Top デモ</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />

<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
	// hide #back-top first
	$("#back-top").hide();
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});
		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});
});
</script>
</head>

body内のコードです。

<body>
<div id="content">
<center><p><img src="images/demopage.png"></p></center>

<h1>Title1</h1>
<p><img src="images/photo1.jpg" alt="" /></p>
<p>
(略)
</p>
<h1>Title2</h1>
<p><img src="images/photo2.jpg" alt="" /></p>
<p>
(略)
</p>
<h1>Title3</h1>
<p><img src="images/photo3.jpg" alt="" /></p>
<p>
(略)
</p>

<p id="back-top">
<a href="top"><span></span></a>
</p>

</div>

CSSのコードです。

	position: fixed;
	bottom: 30px;
	margin-left: -100px;
}
#back-top a {
	width: 100px;
	display: block;
}
#back-top span {
	width: 100px;
	height: 100px;
	display: block;
	margin-bottom: 7px;
	background: url(images/gotop.png) no-repeat center center;
}

Related Article

8 Comments & Tracbacks

  • kore 2012-07-06 11:57 AM

    参考になりました。
    ありがとうございます。

    Reply

    • saori 2012-07-06 2:06 PM

      コメントありがとうございます!
      少しでも参考になれば嬉しいです(^ー^)

      Reply

  • ぽーりー 2012-08-12 10:21 AM

    これIEだと動作不安定になりますね。
    フェードインの時にアイコン編集中に作ったパスのような物が浮かび上がったり。
    こちらのサイトでも表示されていないようで・・・。

    Reply

    • saori 2012-08-12 3:21 PM

      フェードイン・アウトはIE8以下ではサポートされていないので表示がおかしいのでしょうか…?このブログ自体はIEでの表示確認は行なっていないので、IEでの挙動は把握していないのですが、コード自体は以前使用した時にIE7以上で正常に使用できた覚えがあります…どのような状況で不安定になるのかはすみませんわかりません。

      Reply

  • Akito 2015-05-14 1:25 PM

    $(document).ready(function(){});
    と、
    $(function(){});
    は同じ意味なので、
    さらに短縮できませんか?


    $(function(){
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
    $('#back-top').fadeIn();
    } else {
    $('#back-top').stop(true, true).fadeOut();
    }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function(){
    $('body,html').animate({
    scrollTop: 0
    }, 800);
    return false;
    });
    });

    Reply

Leave a Comment

saori にコメントする コメントをキャンセル

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


*


Categorys

Tags

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