ページ内のリンクをスムーズに移動してくれる「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さんのサイトからダウンロードすることができます。
