現在、ご依頼の新規受付を休止しております。何卒ご了承下さい。

大阪市北区 パソコン・スマホ・タブレット・Wi-Fi 出張設定 7,000円
090-9717-7252 / nakagamiya@gmail.com / お問い合わせ

なかがみや nakagamiya.com

Home Home » Web » jQuery + “Animated Scroll to Top”を使ってぬるっとスクロールする機能を実装する。

jQuery + “Animated Scroll to Top”を使ってぬるっとスクロールする機能を実装する。

ごきげんよう、なかがみです。以前に書いた記事、「jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。」を、かなり多くの方に読んで頂いているようで、また、あちこちでサイトに実装しているのを見かけるようになりました。中には、私が作ったつたないサンプル画像もそのまま使って頂いていたりもして、ひそかに「書いてよかった!」と喜んでいます。

さて、その記事のコメント欄で「すでにあるページ内の文字に対して行う方法を教えていただけないでしょうか?」というご質問を頂きました。ページ内の好きなテキストに、スクロールするためのリンクを付けたい、ということですね。

以前の紹介記事の実装方法の場合、「画像を読み込む」のと「トップへ戻る機能をつける」という仕組みでワンセットになっているため、応用する形での実装は不向きと考えました。ですので、あらためて、今回の目的に最適な方法を探し、運良く見つけられましたので紹介、解説します。

情報源

デモページ

実装手順

  1. <head>~</head>に、jQueryを読み込みます。
  2. jQueryを読み込む記述の後に、スクロール機能のJavaScriptを記述します。
  3. スクロールリンクを付けたいテキスト要素に、id=”back-top” を記述します。
  4. スクロールリンクを付けたいテキストを<a href=”#top”>~</a>で囲みます。

JavaScript読み込み部分のコードサンプル

<script type="text/javascript" src="jquery-1.3.2.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>

リンクテキスト部分のコードサンプル

<p id="back-top"><a href="#top">トップへ戻るリンクテキストはこれです。</a></p>

機能オプション

JavaScriptの該当箇所を編集することで、動作方法を調整できます。

scrollTop: 数値
戻る位置の指定です。ページ上端から「数値」にある場所まで戻ります。例えば、0なら最上。300ならそこから300下の位置になります。
戻り位置設定直後の数値
戻る時のスクロールの速さ。初期値は800となっていて、数字を小さくするほど速く、大きくするほどゆっくりスクロールします。

解説は以上です。内容の誤りや、うまく使えない、こんなのはどうかな?と思うことがあれば、遠慮なくコメント、メールTwitterその他でご相談ください。それではまた。

New »

Old »

コメントを残す

メールアドレスが公開されることはありません。

▼スパム対策(必須) * Time limit is exhausted. Please reload CAPTCHA.

Home Home » Web » jQuery + “Animated Scroll to Top”を使ってぬるっとスクロールする機能を実装する。

お問い合わせフォーム, 管理