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さんのサイトからダウンロードすることができます。

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

  2. JavaScript

    画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」…

    とてもお洒落なjQueryのイメージスライダーがあったのでご紹介します…

  3. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

  4. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

  5. DD Scroll Boxes

コメント

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

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

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP