【JavaScript】画面移動時にアンカーの位置がズレる？ときの対応方法

JavaScript(ジャバスクリプト)

2023.01.112023.05.05

そんなことがあるのかな…？と思ったら、そんなことがありましたので記録として残しておきたいと思います…。

アンカー要素がfixedの場合にずれる？
position を relative に設定する
解決できたソース（JavaScript）
まとめ

アンカー要素がfixedの場合にずれる？

アンカー要素の position が fixedの場合が考えられます。上部のヘッダーが固定されているため、スクロールに応じてアンカーの位置がズレてしまうことがあります。

あとは、Lazy Load（レイジーロード）／画像の遅延読み込みをしていることで、画像の表示が追いつかずにアンカーの位置がずれることも

position を relative に設定する

この問題を回避するには、アンカー要素の position を relative に設定するという方法が考えられます。アンカー要素は親要素を基準に相対的な位置を保つことができます。

また、アンカー要素の top と left プロパティを使用して、アンカー要素を移動させることもできます。これらのプロパティを使用することで、アンカー要素を移動させることができます。

# HTML
<div id="anchor">Anchor</div>

# CSS
#anchor {
  position: relative;
  top: 10px;
  left: 10px;
}

アンカー要素の位置を固定する方法です。これらの方法を使用することで、画面移動時にアンカーの位置がズレる問題を回避することができます。

ただし、この方法だと、固定されているメニューの固定が解除されてしまいます。positionを変更せずに解決するには、JavaScriptで調整する方法があります。

解決できたソース（JavaScript）

試されている方も多くいらっしゃいましたが、まずアンカーの場所を取得して、その後に正しいアンカー位置に移動する、という方法です。

[rml_read_more]

<script>
$(window).ready(function() {
try {
    const delayTime = 600; //アンカー位置を再確認するまでの待機時間（ミリ秒）
    const adjust = 50; //高さの微調整
    
    //URLに#タグがあるか確認
    const getHash = ($this) => {
        if (!location.hash){
            console.log('アンカータグは指定されていません。');
        } else {
            return location.hash;
        }
    }
    console.log('アンカータグは '+getHash()+' です。');

    //アンカーの位置確認（1回目）
    const firstPositionY = $(getHash()).offset().top;
    console.log('最初に取得した '+getHash()+' の高さは '+firstPositionY+' です。');

    //アンカーの位置確認（2回目）
    const secondPositionY = ($this) => {
       return $(getHash()).offset().top;
    }

    //数秒後にアンカーの位置が変わっていたら正しい位置にスクロール
    setTimeout(function(){
        console.log(delayTime/1000+'秒後の '+getHash()+' の高さは '+secondPositionY()+' です。');
        if(firstPositionY != secondPositionY()){
            $('html,body').animate({ scrollTop: secondPositionY()+adjust }, 'fast');
            console.log(getHash()+' の現在位置が変化しているため正しい位置にスクロールしました。')
        }else{
            console.log(getHash()+' の現在位置に変化はありません。')
        }
    }
    ,delayTime);
} catch (error) {
    console.log('アンカータグが見当たらないため処理を終了しました。');
}
});
</script>

このJavaScriptコードは、URL内のアンカータグがページ上で位置を変更した場合に、自動的にスクロールの調整を行うものです。以下がこのコードが行うことです。

delayTimeという変数を設定します。これは、アンカー位置を再確認するまでの待機時間（ミリ秒）です。
adjustという変数を設定します。これは、高さの微調整値です。
getHashという関数を定義します。この関数は、現在のURLに#タグがあるかどうかを確認し、あれば#タグを返します。なければ、コンソールに「アンカータグは指定されていません。」と表示します。
console.logを使って、現在のURLの#タグを表示します。
firstPositionYという変数を設定します。これは、最初に取得した#タグの高さです。
secondPositionYという関数を定義します。この関数は、現在の#タグの高さを返します。
setTimeoutを使って、一定時間後に現在の#タグの高さを再度取得します。その際、1回目に取得した高さと異なっていた場合には、正しい位置にスクロールするように処理を行います。スクロール処理には、jQueryのanimateを使用しています。
例外処理を追加し、#タグが見つからない場合には、コンソールに「アンカータグが見当たらないため処理を終了しました。」と表示します。