(記事内リンクにPR含む場合があります)

コピペでOK!スムーススクロールでページ内リンクやトップへ移動!#なしで

Webデザイン

ペンギンがスムーズに泳ぐ

記事が長い場合、目次やページ先頭「#」へのページ内リンクはとても便利です。しかもスムーズスクロールで移動すれば動きもわかりやすいし気持ち良い。今回はJavaScriptやjQueryのプラグインを使わずに実現する方法です。

最近は多くのブログ・サイトで右下に「ページ先頭へ」戻るボタンやリンクを見かけます。しかしクリックして一気に最上部までワープすると味気ないし自分の位置を見失いがちです。目次の場合も同様です。

ゆめぴょんです。こんちはっ(^^)/

ページ内リンクはSEO対策にもなると聞いたことがあります。しかし私はむしろ訪問者のためのナビゲーションの1つとして便利だと思っています。

ページ内部リンクのしくみと弊害

そのしくみはとても簡単です。現在のURLの後に「#」をつけるとページ先頭へ、「#pyon」などをつけると「id="pyon"」を設定してる位置へジャンプします。

だから見出しに「id="midashi-1"」などの値を設定しておけば、「<a href=”#midashi-1″>見出し1</a>」という風にして目次を作ることも可能です。ただしURLに「#」がついてしまうと弊害もあります。

たとえば「http://wispyon.com/#midashi-1」は見出し1へジャンプした直後のURLです。この状態で「はてなブックマーク」や「Pocket」ボタンを押すと本来とは別のURLとして登録される場合があります。

「http://wispyon.com/#midashi-2」もまた別のURLとなる場合があります。ソーシャルボタン側の設定でこれを回避する方法もありますが、気持ち悪いので私は「#」を表示しないようにします。

ちなみに「ツイッター」「Facebook」「Google+」ボタンは私が試したところ、「#」を除いた純粋なURLで登録してくれました。「はてブ」「Pocket」もそのうち対応してくれるかもしれません。

スムーズスクロールして「#」も付けないスクリプトを設置

これを実現するJavaScriptのプラグインやライブラリは探したらいろいろあります。しかしただこれだけの機能でいいのなら、数行のスクリプトでできるため、自分で設置することをオススメします。

jQueryスクリプトファイルの設置

まずは「jQuery」のスクリプトファイル(JavaScript)を利用するため、次のように1行を追加してください。WordPressの場合はテーマや利用プラグインによっては使用している可能性が高いので設置前にソースを検索して、ない場合のみ追加してください。

[html]
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
[/html]

ちなみに「jquery/1.10.2/」の数値部分はバージョンを表しています。2013年9月時点の最新バージョンです。これ以降なら使えるはずです。「1.9.*」を利用している場合もそのままで問題ありません。2.*系でも大丈夫だと思うけど未確認です。

設置場所の理想はフッターの後で</body>の直前くらいです。WordPressに設置したい初心者の場合は、管理画面から「テーマ」→「テーマ編集」で「footer.php」に追記することになります。

なお以前の記事、サイドバーの自動追尾の時にも「jQuery」を設置しました。自動追尾スクリプトが動作しているのなら今回は「jQuery」を設置しないでください。

スムーズスクロールのスクリプトの設置

サイトのHTMLファイルに下のスクリプトをコピペするだけです。私は、</body>の直前あたりをオススメします。後はダメです。前ならどこでもいいです。そして必ず「jQuery」ファイルの後です。

WordPressに設置する場合は、プラグインのファイルを直接書き換えることになるため、失敗すると画面が真っ白になったりします。必ずバックアップをとってから行ってください。問題が発生したらすぐに元のファイルに戻してください。修正は自己責任でお願いします。

WordPressのテーマファイルの編集に慣れていない方は、WordPress管理画面から「外観」→「テーマ編集」をクリックしてください。設置場所は私は「footer.php」の</body>の直前あたりをオススメします。後はダメです。あと「jQuery」の後です。

[javascript]
<script type="text/javascript">
//ページ内リンク、#非表示。スムーズスクロール
$(‘a[href^=”#”]’).click(function(){
var speed = 800;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? ‘html’ : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
</script>
[/javascript]

カスタマイズの方法

4行目の数値を変えるとスクロール速度を変更できます。大きくするほどゆっくりになります。あまり遅すぎると、いやがられるので400〜1200くらいの間が適当だと思います。

外部のJavaScriptファイルの中に保存する場合は、1、11行目はカットしてください。

WordPressのバージョンによっては動作しません。その場合は3、5、6、8行目の「$」を「jQuery」に変えてみてください。それでもダメなら「jQuery」ファイルを複数回読み込んでないかを確認してください。

まとめ:今日のゆめぴょんの知恵

ブログのデザインはまだまだだけど、スムーズスクロールみたいなちょっとしたアクションは、少しバージョンアップしたような気分になります。

最近は高速化や最適化などの目にあまり見えない部分のカスタマイズが多かったので、動きがあると楽しいですね♪

なお今回の記事は次のブログも参考にさせていただきました。ありがとうございます。興味ある方は読んでみてください。

jQueryでスムーススクロール [Cool Web Window]
ゆめぴょんでした。ちゃおっ!

タイトルとURLをコピーしました