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. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

  2. no-image

    JavaScript

    超シンプルでオプションもわかりやすいjQueryスライダー「Free Simple Slider」

    Free Simple Sliderは、超シンプルで使い方も簡単なスラ…

  3. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  4. no-image
  5. no-image

    JavaScript

    スライダータイプの質問フォーム実装「jquery.formslider」

    jquery.formsliderはスライダータイプによる質問フォーム…

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

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

コメント

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

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

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me
  5. ルック セレクション

アーカイブ

PAGE TOP