JavaScript

ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

ページ内のリンクをスムーズに移動してくれる「smoothScroll.js」を使ってみました。よく「Topへ戻る」といったリンクをクリックすると一番上にスルスルと移動できるあれです。このブログでは「Topへ戻る」のリンクがあるんですが何も施してなかったのでただ上に行くだけでした。いきなり画面が切り替わるよりは、上に昇っていく様子を見せた方がユーザーにとっても安心だと思うのでこれを機会に入れてみました。とても快適です。

[ads_center]

使い方

使い方はとても簡単です。head内にダウンロードしたsmoothScroll.jsを読み込みます。

<script type="text/javascript" src="js/smoothScroll.js"></script>

あとは#(ハッシュ)をつけたページ内リンクがあれば自動で適用してくれます。

<a href="#header">Topへ戻る</a>

スムーズさせたくない場合はdata属性にnoSmoothをつけるだけでOKです。

<a href="#header" data-tor-smoothScroll="noSmooth">ここは適用されない</a>

シンプルでとても使いやすいですね。

WordPressでfunctions.phpから読み込ませる

自分の場合はfunctions.phpに記述してhead内に読み込ませるようにしました。

// smoothScroll.js
function smooth_scroll() {
    if(!is_admin()) {
        echo '<script type="text/javascript" src="' . get_bloginfo('template_directory') . '/js/smoothScroll.js"></script>' . "\n";
    }
}
add_action('wp_head', 'smooth_scroll');

これでwp_headから出力されるようになります。ということで、ページ内リンクをスムーズに移動させたい方にはオススメです。

to-Rさんのサイトからダウンロードすることができます。

シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box Widget」前のページ

指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin次のページ

関連記事

  1. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  2. JavaScript

    縦スクロールすると横スクロール(水平移動)していくjQueryプラグイン「jInvertScroll…

    これおもしろいですね。縦スクロールすると垂直に移動していくのではなくて…

  3. Nex

    JavaScript

    ダイナミックで美しいフルスクリーンのjQueryスライダーを実装できる「Nex」

    Nexはダイナミックで様々なアニメーションエフェクトが用意されたフルス…

  4. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  5. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ペットボトルホルスター
  2. SRS-XB43
  3. Nu:kin

アーカイブ

PAGE TOP