【テクニック】ヘッダー固定の時、ページ内移動をヘッダー分ずらす方法
ページ内の特定の位置へページ移動したり、直接該当部分へページ遷移したりすることがよくあります。
通常であれば、特に何か難しいことをせずとも<a>タグに遷移させたい要素のIDを指定することで、その位置まで遷移させることが出来ます。
しかし中にはヘッダー等をページ上部に固定させているサイトが数多く存在しています。
このようなWEBサイトの場合、通常の方法では遷移することは出来ますが、固定要素分だけ隠れてしまいます。
固定要素がある場合は、その要素分だけ差し引いた位置へ遷移させてあげる必要があります。
今回のブログではヘッダー等の要素をページ上部に固定させているサイトでも遷移先を指定する方法をご紹介します。
この記事の目次を表示
通常の場合
まずは通常の場合のページ内移動、特定ページへの指定遷移の場合を見てみましょう。
ページ内移動の場合
ページ内移動の場合、以下のように移動させたい要素のIDを<a>タグに指定することで、jQueryを使い、その要素までアニメーションを伴ってページ内移動させることが出来ます。
<a href="#target">会社概要</a>
// 同一ファイル内に記述
<div id="target"></div>
$(function(){
$('a[href^="#"]').on('click',function(){
const speed = 500;
let href = $(this).attr('href');
let target = $(href == '#' || href == '' ? 'html' : href);
let position = target.offset().top;
$('body,html').stop().animate({ scrollTop: position }, speed, 'swing');
});
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
他ページへ遷移の場合
他ページへ遷移させる場合も<a>タグにファイル名、ディレクトリ名を指定し、末尾に移動させたい要素のIDを指定することでページを読み込んだ際、その位置を表示することが出来ます。
なお、別ページへ移動させる場合は、jQueryは必要ありません。
<a href="/company/#target">会社概要</a>
// 別ファイルに記述 この例では/company/index.html or /company/index.php
<div id="target"></div>
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
ヘッダー固定の時、ページ内移動をヘッダー分ずらす方法
それではここからがこの記事のメイン部分、実際にヘッダー固定の時、どのようにすることで移動先が固定したヘッダーに隠れてしまうことを防ぐことが出来るのか見ていきましょう。
ページ内移動の場合
ペ―ジ内移動をする場合、先ほどのjQueryのコードを以下のように一部変更します。以下変更後のjQueryのコードです。
$(function(){
$('a[href^="#"]').on('click',function(){
const speed = 500;
let href = $(this).attr('href');
let target = $(href == '#' || href == '' ? 'html' : href);
let position = target.offset().top - $('header').outerHeight(true); // ここの行を変更
$('body,html').stop().animate({ scrollTop: position }, speed, 'swing');
});
});
let position = target.offset().top;
6行目のこの部分を
let position = target.offset().top - $('header').outerHeight(true);
このように変更します。target.offset().topでページ移動させたい要素の位置を数値として取得し、その値から$('header').outerHeight(true)、ヘッダーの高さ分、引いてあげます。
そうすることでページ内移動の際、移動先がヘッダーに隠れてしまうという現象を解消することが出来ます。
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
別ページの場合
続いて別ページへ遷移させる場合はページを読み込んだ際にjQueryのプログラムを動作させる必要があります。
まずはjQueryのプログラムを見てみましょう。
$(window).on('load', function() {
const speed = 1;
const href = window.location.hash;
const target = $(href === '#' || href === '' ? 'html' : href);
if (target.length) {
let position = target.offset().top - $('header').outerHeight();
$('html, body').animate({ scrollTop: position }, speed, 'swing');
}
});
このように先ほどまではリンクをクリックした際に動作するプログラムとしていましたが、ページ移動してしまうためクリックイベントでは適切な発火タイミングを指定することが出来ません。ページ移動の場合はページを読み込んだタイミングを発火のタイミングとして設定します。
移動スピードは0.001秒とし、この場合人間の目には初めからそこを表示しているように見えます。正確にはページを表示した瞬間に該当箇所へ移動するようになっています。
window.location.hash;でURLからハッシュを取得し、その要素の位置を取得します。ここからはページ内移動と同様にその値からヘッダー分の高さを引いた位置にページ内移動させることで、移動先がヘッダーに隠れてしまうという現象を解消することが出来ます。
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
まとめ
今回の記事ではヘッダーが固定の際、ページ内移動や別ページへ移動した時にヘッダーに隠れてしまう現象を解消する方法をご紹介しました。
ヘッダーを固定する際とは数多く存在します。そのようなサイトの場合は、少し手を加えてあげることでWEBサイトを閲覧するユーザーの体験を飛躍的に向上させることが出来ると思います。
ちょっとしたことですがユーザー目線に立ったWEBサイト構築に取り組んでいきたいですね。
