読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

( jQuery ) ページ内リンクをスムーズにスクロールさせる 【jquery.page-scroller.js】


ページ内リンクは、上手に使ってあげないと、ユーザが「自分は今サイト内のどこにいるのか」を見失ってしまい、ストレスを感じて離脱する可能性が高いそうです。
その為、ページ内リンクを使用する際は、スムーズスクロールさせる必要があるということで、jQueryでページ内リンクをスクロールする方法を勉強しました。
色々と調べて、一番簡単だったのが、jquery.page-scroller.jsを使った方法なので、そちらを紹介します。
●動作確認をしたブラウザ

IE6、7、8
Firefox
Chrome

準備としては至って簡単。
jqueryを下記サイトからインストール
http://jquery.com/
(※自分がダウンロードしたときのバージョンはjquery-1.3.2.js)
jquery.page-scroller-306.jsを下記サイトからインストール
http://coliss.com/articles/build-websites/operation/javascript/296.html
③書き方は下記コードを参照してください。
注意点としては、jquery-1.3.2.jsを必ずjquery.page-scroller-306.jsより前に読み込むよう記述してください。
ただそれだけです。

<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.page-scroller-306.js"></script>
</head>
<body id="top">
<div style="height:100px;"></div>
<a href="#bottom">ページの下部へ</a>
文字色 <div style="height:1000px;"></div>
<a id="bottom" href="#top">ページの先頭へ</a>
<div style="height:100px;"></div>
</body>
</html>

飛ばしたい先に id="***" を指定。a href ="#***" で指定した場所にスムーズスクロールできます。
jquery.page-scroller-306.jsの【delayExternal= 200】の値を編集すればスクロールの速度を調整できます。