ページ内リンクをスムースに移動させる方法

2008年8月17日2010年9月12日

URLをコピーしました！

ページ内にリンクをしている場合、リンクをクリックするとその箇所に移動しますがこの移動をスムースにスクロールさせているページを見たことはありませんか？

■ サンプル

Smooth scrolling demo（適当な「Paragraph 0」などをクリックしてみてください）

Javascript「Smooth scrolling」を使えば簡単に実現できます。

このページから「smoothscroll.js」を右クリックしてローカルに保存します。
設置したいページの<head>?<head>の中に以下のコードを記述します。
```
<script type="text/javascript" src="http://yourdomain/smoothscroll.js"></script>
```

後はページ内リンクを作るだけ！
（記述例）

<!-- リンク元 -->
<a href="#Down">Down</a>
<!-- リンク先 -->
<a name="Down"></a>

ここで注意したいのが、Javascriptで移動しているためブラウザの「戻る」ボタンではリンク元の箇所へは戻れないという点。

実は私はこれが結構気持ち悪かったです。Firefoxでマウスジェスチャーを使っているのでよくいったり戻ったりするのですが、この時にページ内のリンク元に戻らずに、もう一つ前のページに戻ってしまいます。これは気持ち悪い。見た目はきれいですが私と同じように感じる人も少なからずいるのでは？と思い、このブログへの搭載は見送りました。

ページ内リンクを使う場合、目次があって本文へリンクという作りが多いと思いますが、このJavascriptを使う場合、本文中には必ず「目次に戻る」というリンクを用意する作りが必須になりそうです。（こういう作りの場合このJavascriptの有無に関係なくこの作りは理想ですね。）