【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript ｜ KLUTCHE

最近ではページ内でリンクを飛ばす際には当然の仕様となっているスムーススクロールを簡単なタグで実現します。 どうだい？スムースだろ？ デモページ 個人的にこの動きが大好きです。 1時間くらいならずっとスクロールを見ていられます。 鬱の時なら半日はいけます！ HTML <a href="#bottom">下へスムース！</a> なにも工夫しなくて良いです。 ただ＃をつけてアンカーポイントへリンクを貼るだけです。 jQuery依存のスクリプトなので、head内でjQueryを呼び出しましょう。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> その後に以下のスクリプトを書きます。 <script type="text/java

[laconic]

ページ内スクロール

[upsk]

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

[mtart]

ページ内でスムーズなスクロール

[syouhei08]

ページ内スムーススクロール

[pankichi]

するするさせたい。

[pomojan]

こういう感じで、1ページにつき1スクリプトな解説だととてもわかりやすくシンプル！

[verda]

こういうHP好き

[rdiajp]

裏技

[harukamori1020]

Javascript

[wangeru]

KLUTCHEは仕事で使えるコーディングテクニック、プログラミング、Webサービスや、どうでもいい思いつき情報を配信する、真人間を目指す方へのブログです。

[loose-art]

jQueryのスムーススクロール。 jquery.easie.jsやjQuery Easing Pluginを使うことによって、 動きに変化をつけることが可能。

[shinchaaaaaaan]

これもまた今さらなんですが

[mathemathiko]

「どうだい？スムースだろ？」