【WordPress】アンカーリンク＋target＝_blankで挙動がおかしくなる時の原因と対策

起こった現象

WordPressで、以下のようなリンクをクリックした場合↓

html

<a href="https://example.com/test#midashi" target="_blank" rel="noopener noreferrer">別窓リンク</a>

問題なければ、別窓orタブがひらいて、testページの「id="midashi"」へ、移動した状態が表示されます。

今回なぜか、クリックした元のページがtestページに遷移したうえ、別窓orタブでtestページを開く（でもidの位置へ移動はしない）という現象が起きました。

WordPressでサイト作成中に遭遇したので、WordPress上での対策として書きます。

原因

WordPressで使用しているテーマまたはプラグインに同梱されている「スムーススクロール」が原因でした。

スムーススクロールはだいたい$('a[href*="#"]').on('click',function(){});という感じで「#」を含むリンクをクリックをすると発火するようになっています。
ただこれは、target＝"_blank"を設定してないリンクを前提としてるので、どうもこれが原因のようです。

対策

テーマやプラグインの設定でスムーススクロールを解除できればいいですが、今回はできなかったので、以下のような対策をしました。

別窓で表示したい、アンカーリンクを設定したページにカスタムHTMLなどで以下のような記述を追加します。

html

<script type="text/javascript">
jQuery(function($) {
  $(window).on('load',function(){
    var locUrl = location.href;
    var setHash = locUrl.split('?');
    //現在のページURLに?が含まれる場合はスクロール移動
    if(setHash[1]){
        var posName = ("#"+setHash[1]);
        var position = $(posName).get(0).offsetTop;
        $('body,html').animate({scrollTop:position}, '0');
    }
  });
});
</script>

設定するリンクは↓のように指定します。

html

<a href="https://example.com/test?midashi" target="_blank" rel="noopener noreferrer">別窓リンク</a>

「#」を含むと挙動がおかしくなるので、「#」の代わりに「?」を含むリンクを別窓で表示。
↓
表示したページのURLが「?」を含んでいる場合、「?」以降の文字列のアンカーリンク位置へスクロール移動する。

という仕組みです。
今回はこんな感じで対策しました。

注意点

WordPressの場合、「#」の代わりに「?」を使うので、パーマリンク設定で「?」を含まないURLに設定しておく必要があります。

余談

テーマやプラグインでスムーススクロールが同梱されてるのはいいんですが、たまーにこういうことが起きるので、テーマやプラグインの挙動に必須でなければ任意で外せるようにしておいて欲しいです。

もしくは、発火条件を$('a[href*="#"]')ではなく、$('a[href^="#"]')とか$('a[href*="#"]:not([target="_blank"])')とかにしてもらえたら助かります。

あと、ヘッダー固定とかすると、見出しとヘッダーがかぶるので、ヘッダー固定をできるテーマの場合、ヘッダー固定したら少しズラしてスクロール移動するようにしてもらえたら嬉しい。

今回のコードは、以前書いた「スムーススクロール2020年版」からヒントを得ました。
書き残しておくもんですね。

See the Pen Untitled by Mei Koutsuki (@mei331) on CodePen.