*

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

公開日: : 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-自動で画像のフェードイン・フェードアウトをする方法

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

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

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

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

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

no image

テキストの縦位置を設定する。line-height:を使用する。

今回は、テキストの間隔について書きたいと思います。 テキストを書くときテキストの縦位置が気にな

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

no image

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

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

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑