CODE-LIFE│コーディング・プログラミングのメモブログ

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ

ページ内リンクをすべて滑らかにスクロールさせるjQuery

f:id:maru0014:20151019221044p:plainページ内でのリンクを貼る場合

 

<a href="#pagetop">ページトップへ戻る</a>

 

などと書きますよね。
Q&Aのページなどの場合大変便利。

でもこれ、普通にリンクを貼るだけだと瞬間的に画面が切り替わってスクロールされている感が少ない!

ちょっとこだわったサイトだとすーーっとスクロールして表示されます。

上に行ったのか下に行ったのか分かりやすく、何より今風でいいですよね。

 

これを簡単に実装できるようにコピペできるソースを公開!

 

 

 

上記を

<head> ~ </head> 内 もしくは</body>直前に挿入。

これだけで滑らかにスクロールされます。

 

※「リンクが # で始まる場合」という指定なので別ページ間でのスムーズスクロールは不可です。