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. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  2. CoutUpCircle

    JavaScript

    カウントアップしてくれるjQueryプラグイン「CoutUpCircle」

    CoutUpCircleは目標に指定した数までカウントアップしてくれる…

  3. JavaScript

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

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

  4. no-image
  5. graphite

    JavaScript

    シンプルな棒グラフを生成できる「graphite」

    graphiteはシンプルな棒グラフを生成できるJavaScriptラ…

  6. normalmap.js

    JavaScript

    インタラクティブなライティングエフェクトを実装できる「normalmap.js」

    normalmap.jsはシンプルでインタラクティブなライティングエフ…

コメント

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

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

最近の記事

  1. COMOLI 和紙コットンリストバンド
  2. スターバックス インドネシア アチェ
  3. ベーコンとほうれん草のキッシュ
  4. サンクラフト ポテトング

アーカイブ

PAGE TOP