ページ内のスムーズスクロールをたった１行で書く方法

jQuery Web


はじめに

最近お仕事で、WordPressのテーマを作成しているのですが、

WEBサイトって
「トップに戻る」ボタン（ページ内リンク）でスムーズに一番上まで戻ると
気持ちイイですよね。

そんなスムーズスクロールをたった１行で書く方法があります。

スムーズスクロール書いてみよう！

サイト内に以下の１行を書いてみてください。

$('.pageTop a').click(function () { $('html,body').animate({ scrollTop: 0 }, 'slow'); return false; });

※ちなみにjQueryが必要です。

・なんだよ！jQuery使ってるじゃないか！
・無理やり一行にしてるだけじゃないか！

という話はさておき…(＾ω＾)

あとはhtmlでページの好きな箇所に

<div class="pageTop">
	<a href="#">トップへ</a>
</div>

と書いて、クリックするとページの一番上までスルスルっと戻ってくれます。

最後に

手軽にスムーズスクロールしたい人は使ってみてくださいね。(゜∀゜)

他のプラグインとの相性が悪いということもありません。
（私の作るwebサイトには大抵このコードが入っています。）

ではでは。

よろしければこちらの記事もどうぞ

PythonとPHPのコードを載せています。