いつもお世話になっております。
ブラウザの戻る動作についての質問になります。
ブラウザバックした際に、前のページの移動直前に見ていた位置に戻るようにしたいのですが常にページの先頭まで戻ってしまいます。
長いページになるといちいちスクロールさせなければならず非常にストレスに感じます。
一部のページだけでなく、全ページ同様の動作となります。
これはxwriteの仕様ですか？それとも設定で変更できるものでしょうか？
よろしくお願いいたします。
---------------------------------------------- WordPressバージョン: 6.9.4 PHPバージョン: 8.3.30 ブラウザ: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:150.0) Gecko/20100101 Firefox/150.0 Webサーバー: Apache プロトコル: HTTP/1.1 言語: ja,en-US;q=0.9,en;q=0.8 ----------------------------------------------
@gms_g さん
ブラウザバックした際に、前のページの移動直前に見ていた位置に戻るようにしたいのですが常にページの先頭まで戻ってしまいます。
おっしゃるとおりです。
Xwrite側で読み込んでいるJSファイルに問題があるようですが、ノーコードで解決できる手段は今のところございません。
少し専門的かつ応急処置的な作業となってしまいますが、子テーマの「functions.php」、もしくは「Code Snippets」などのプラグインを利用して以下のコードを入力すれば対処可能です（当該ファイルを読み込ませなくするための処置になります）。
add_action('wp_enqueue_scripts', function() {
wp_dequeue_script('xw-common');
wp_deregister_script('xw-common');
}, 20);
※おそらく問題ないかとは思いますが、他の動作に支障が出ないか、念のためご確認くださいませ。
もし分からないようであれば、開発担当のご返信をお待ちください。
XWRITEがリリースされたときからのユーザーです。
※回答は個人の見解によるもので、エックスサーバー様のご意見とは異なる場合がございます※
@yinabaさま
仕様なのですね。
教えていただいたコードを「functions.php」に入れて動作確認できました。
ありがとうございます。
こちらで当面は対処できそうです。感謝いたします。
前のページの移動直前に見ていた位置に戻るようにはなったのですが、どうもメインビジュアルのスライダーが機能しなくなるようです。
子テーマは使用していないので直接functions.phpに記述しているのですが、その影響もあるのでしょうか。
開発担当者様からのご連絡を待ちたいと思います。
@gms_g さま
ご質問いただきありがとうございます。
運営からのご案内をお待たせしてしまい申し訳ございません。
また、@yinaba さまにおかれましても、ユーザーさま同士での温かいサポートをいただき誠にありがとうございます。
ブラウザバックした際に、前のページの移動直前に見ていた位置に戻るようにしたいのですが常にページの先頭まで戻ってしまいます。
長いページになるといちいちスクロールさせなければならず非常にストレスに感じます。
一部のページだけでなく、全ページ同様の動作となります。
これはxwriteの仕様ですか？それとも設定で変更できるものでしょうか？
ブラウザバック時の挙動につきまして、毎回のスクロールでユーザーのみなさまに多大なストレスをおかけしており大変心苦しく存じます。
本件はテーマ側の考慮不足による不具合であり、設定画面等からの変更ができない状態となっております。
ご不便をおかけし、誠に申し訳ございません。
みなさまに快適にご利用いただけるよう、今後のアップデートにてしっかりと修正対応を進めてまいります。
修正が完了するまでは下記の応急処置コードを追加してご対応いただけますと幸いです。
応急処置コード（クリックで開きます）
add_action('wp_footer', function () {
?>
<script>
(function () {
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
}
// ヘッダーオフセットを考慮したハッシュスクロール
function scrollToHash(hash) {
var id = decodeURIComponent(hash.replace('#', ''));
var target = document.getElementById(id);
if (!target) return;
var position = target.getBoundingClientRect().top + window.scrollY;
var wpadminBar = document.querySelector('#wpadminbar');
if (wpadminBar) position -= wpadminBar.offsetHeight;
var headerNav = document.querySelector('.header-fix');
if (headerNav) {
var w = document.documentElement.offsetWidth;
if (
(headerNav.classList.contains('-for-pc') && w > 992) ||
(headerNav.classList.contains('-for-mb') && w < 991)
) position -= headerNav.offsetHeight;
} else if (hash !== '#container' && !document.querySelector('.headerImage')) {
var headerInfo = document.querySelector('.headerInfo');
if (headerInfo) position -= headerInfo.offsetHeight;
}
window.scrollTo({ top: Math.max(0, position), behavior: 'smooth' });
}
window.addEventListener('pagehide', function () {
history.replaceState({ scrollY: window.scrollY }, '');
});
window.addEventListener('pageshow', function (e) {
var navType = performance.getEntriesByType('navigation')[0];
var isBackForward = e.persisted || (navType && navType.type === 'back_forward');
if (!isBackForward) return;
setTimeout(function () {
if (location.hash) {
// bfcache または .toc_block がない場合は自前でスクロール
// 非bfcache + .toc_block あり は toc.js に任せる
if (e.persisted || !document.querySelector('.toc_block')) {
scrollToHash(location.hash);
}
} else {
var y = history.state && history.state.scrollY;
window.scrollTo({ top: y || 0, behavior: 'smooth' });
}
}, 150);
});
// toc.js の pushState に scrollY を補完
var _pushState = history.pushState.bind(history);
history.pushState = function (state, title, url) {
history.replaceState({ scrollY: window.scrollY }, '');
try {
if (new URL(url, location.href).hash === location.hash) {
return history.replaceState({ scrollY: 0 }, title, url);
}
} catch (e) {}
_pushState({ scrollY: 0 }, title, url);
};
// 同一ページ内バック/フォワード（ハッシュなしのみ）
window.addEventListener('popstate', function (e) {
if (location.hash) return;
var y = e.state && e.state.scrollY;
setTimeout(function () {
window.scrollTo({ top: y || 0, behavior: 'smooth' });
}, 120);
});
})();
</script>
<?php
}, 99);
なお、テーマ本体のfunctions.phpに追記されますと、
アップデートのタイミングで上書きされてしまいます。
そのため、「子テーマのfunctions.php」または「Code Snippets等のプラグイン」への追加を推奨いたします。
修正完了までお手間をとらせますが、何卒よろしくお願いいたします。
もし設定方法がわからない等ございましたら
お気兼ねなく相談いただけますと幸いです。