ページ内リンクをスムーズにさせる[jQuery使用]
1年以上ブログを放置しておりましたが、今回の投稿を機に再開しようかと思います。
よろしくお願いします。
ページ内リンクとは何か?
ページ内リンクを知らない人はあまりいないと思いますが、念のために書いておきます。
<div id="01"></div> <a href="#01">リンク</a>
みたいなやつです。
ページの上に戻るボタンとかによくあるやつですね。
これでも機能はしていますが、このままだとページが切り替わったような動きとなります。
個人的にこのような動きはUXが低いような気がします。
というわけで本題
javascriptを使い、スクロールの動きをつけます。
おそらくほとんどのサイトはjavascriptを利用して動きをつけていると思います。
今回載せるサンプルコードはjQueryを使用しています。
サンプルコード
$('a[href^="#"]').click(function () { var speed = 500; var position = $(this.hash).length > 0 ? $(this.hash).offset().top : 0; $('html, body').animate({ scrollTop: position }, speed); return false; });
以上となります。
コードの解説
$('a[href^="#"]').click(function () {処理});
このコードで
<a href="#01">アンカーリンク</a>
などhrefが#から始まるaタグを押した時に処理を実行します。
var position = $(this.hash).length > 0 ? $(this.hash).offset().top : 0;
$(this.hash)でhrefの#以下の値を取得し、.size()でその値が存在しているかの検証
存在していればその要素のy座標を、存在しなければ0をpositionに代入します。
$('html, body').animate({ scrollTop: position }, speed);
ここがスクロール部分です。
$('html, body')要素をpositionの位置までスクロールするアニメーションを実行します。
$('html, body')と指定しているのは、ブラウザによってスクロールに対応している要素が異なっているためです。
これに関してはいろんな方が調べているのでここでは割愛します。
解説はここまでです。
最後に
正直ページ内リンクのコードはいろんな人が記事にしていたりするので似たり寄ったりです。
また、ヘッダーが固定のパターンなどでコピー&ペーストするだけでは足りないので必要に応じてコードを追加してください。