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

この記事がおもしろかったらシェアしてね

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

サンプル

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

  1. このページから「smoothscroll.js」を右クリックしてローカルに保存します。
  2. 設置したいページの<head>?<head>の中に以下のコードを記述します。
    <script type="text/javascript" src="http://yourdomain/smoothscroll.js"></script>
    
  3. 後はページ内リンクを作るだけ!
    (記述例)

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

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

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

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

【目次】
1-1.aaa
1-2.bbb
2-1.ccc

2-1.aaa
xxxxxxxxxxxxx
yyyyyyyyyyyyy
↑目次に戻る

2-2.bbb
xxxxxxxxxxxxxx
yyyyyyyyyyyyyy
↑目次に戻る

スポンサーリンク
NO IMAGE
この記事をお届けした
ひとぅブログの最新ニュース情報を、
いいねしてチェックしよう!

この記事がおもしろかったらシェアしてね

ひとぅに興味を持った方はフォローしてね

関連記事

この記事に関連するオススメ


Highslide for Wordpress Plugin