ページ内リンクをよくあるスームズな動きのあるスクロールに!

公開日: : jQuery

jQuery

ページ内リンクを設置した際、
スムーズな動きのあるスクロールにしたくて。

調べてみると、コピペで簡単にいけました。
感謝です。

一応、コードを書いておきます。

まずはページ内リンクを設置。

<a href="#bottom">ページ内リンク</a>


次に、head内でjQueryを読み込んで..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


以下のスクリプトを書きます。

<script type="text/javascript">
$(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>



これだけです。
すごい。

本当に感謝!
ありがとうございます。

ad

関連記事

jQuery

WordPressでjQueryを導入する際のスクリプト書き方。どうしても動かない時は、多分これが原因。

今更に違いないですが.. wordpressでスクリプトのコードを書くときは

記事を読む

jQuery

画像のロールオーバーをゆっくりフェードさせる方法

画像をリンクさせた際、 すこしゆっくり透過させる方法。 もう

記事を読む

jQuery

WordPress&bootstrapでもスムーズでした、横並びの要素の高さを揃えるjQueryプラグイン『matchHeight』

私が運営するメインサイトは、 bootstrapをWordpressで使用しているので

記事を読む

ad

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP ↑