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. DateTime Picker

    JavaScript

    レスポンシブでフラットデザインの「DateTime Picker」

    DateTime Pickerはレスポンシブ対応のフラットデザインによ…

  2. jQuery Text Fade Delay
  3. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

  4. JavaScript

    文字の半分をスタイルすることができるjQueryプラグイン「Splitchar」

    SplitcharというjQueryプラグインを使えば、文字の半分をス…

  5. jQuery contextMenu plugin & polyfill
  6. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

コメント

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

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

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP