*

ページトップへスクロールする方法。

公開日: : css3, html5, jquery

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。

コンテンツが、縦長になった場合、スクロールして一番上にいくのは、手間だと思います。

ボタンをクリックしたら、一番上にページが戻るというものです。

まずは、デモを用意しましたので、見てください。
デモ01

いろんなサイトに使われているのを見ます。

以下のソースを記載します。
今回使用する、スタイルシートは、
index.css
以上の1つです。

scriptは、
custom.js
以上の1つを使用します。

scriptは、htmlに直接書いてもいいのですが、
今回は、別ファイルにしました。

以下がindex.htmlのファイルです。
index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>ページトップへスクロールする</title>
<meta charset="UTF-8" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type='text/javascript' src='js/custom.js'></script> 
</head>

<body>

<div id="wrapper">
<img class="bg" src="images/001.jpg" alt="001.jpg" />
<div id="aaa">
<div id="bbb">スクロールするとTOP<br>スクロールするとTOP<br>スクロールするとTOP</div><!--bbb-->


<p id="page-top"><a href="#body">PAGE TOP</a></p>


</div><!--aaa-->
</div><!--wrapper-->

</body>
</html>

の中は、19行目だけを記載すれば大丈夫です。

次に、スタイルシートです。
index.css

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	color: #000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size: 16px;
	background-repeat: repeat-x;
	width: 100%;
	background-color: #ffffff;
	min-width: 1200px;

}
#wrapper{
	width:100%;
	height:100%;
	margin:0 auto;
	position:relative;
	z-index:0;
	color:#ffffff;
}
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
  /* Set up proportionate scaling */
  width: 100%;
  height: 100%;
  /* Set up positioning */
  position: fixed;
  /* またはabsolute; */
  top: 0;
  left: 0;
}
#aaa{
	width:50%;
	height:2000px;
	margin:0 auto;
	position:relative;
	z-index:0;
       background-color:rgba(0,0,0,0.5);
        text-align:center;
}
#bbb{
line-height: 500px;
}


/*トップページに戻るメニューここから*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
/*通常リンク*/
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
/*マウスを乗せた時のリンク*/
#page-top a:hover {
    text-decoration: none;
    background: #999;
}
/*トップページに戻るメニューここまで*/

PAGE TOPのデザインは、
#page-top
の部分を変更すれば、デザインの変更ができます。

最後にjsファイルです。
custom.js

$(function() {
	var showFlug = false;
	var topBtn = $('#page-top');	
	topBtn.css('bottom', '-100px');
	var showFlug = false;
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {//スクロールが100に達したらボタン表示
			if (showFlug == false) {
				showFlug = true;
				topBtn.stop().animate({'bottom' : '20px'}, 200); //topボタン表示場所
			}
		} else {
			if (showFlug) {
				showFlug = false;
				topBtn.stop().animate({'bottom' : '-100px'}, 200); //topボタンしまう
			}
		}
	});
	//スクロールしてトップ
    topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);//topページに戻るまでの時間を設定する。
		return false;
    });
});

PAGE TOPが出てくるタイミングや、一番上に戻るまでの時間などは、
こちらで変更できます。

以上で完成です。

今回参考にした、サイトがありますのでこちらも参考にしてみてください。
少しのコードで実装可能な20のjQuery小技集

今回デモ01で使用したファイルをUPしときましたので、
よかったら参考にしてみてください。
ダウンロード


関連記事

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

-jQuery-チェックをつけないとボタンが押せなくする方法

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

no image

簡単popupの設置方法。Pop Easyを設置してみました。

今回は、ポップアップ(popup)の設置に取り組んでみました。   ポップアッ

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑