Hatena::ブログ(Diary)

ぼくらのトークン戦争

2012-03-05 ページ内のスムーズスクロールをたった1行で書く方法

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

f:id:a1102012:20120305234215j:image

はじめに

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

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

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

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

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

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

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

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

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

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

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

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

最後に

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

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

ではでは。

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


PythonPHPのコードを載せています。

 

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/a1102012/20120305/1330959194
リンク元