### 実現したいことページをリロードされたらリロードされた位置ではなく先頭から始まるようにしたい。 ### 前提 ScrollTriggerでパララックスを実装しています。横スクロールや状態変化などがあり、その位置でリロードすると表示が崩れてしまう為、リロードで先頭に戻したいという意図です。 https://duck.school/en https://www2.mejiro.ac.jp/univ/mejinavi2024/ リロード後の処理を上記の参考サイトのようにしたいと思っています。 ### 試したこと ```JavaScript window.addEventListener("DOMContentLoaded", () => { window.scrollTo(0,0); }); ``` 上記のコードでリロード後先頭になるようにしようとしましたがこれは動作しませんでした。 ```JavaScript window.addEventListener("DOMContentLoaded", () => { setTimeout(() => { window.scrollTo(0,0); }, 3000) }); ``` setTimeoutで試すと動作するので私が読み込みのタイミングを理解できていないのかと思います。ただこの方法で実装を試してみたものの参考サイトとは違う挙動のような気がしています。どう実装するのがいいのかご教授いただけると幸いです。よろしくお願いいたします。 ### 追記 history.scrollRestoration = "manual"; こちらがシンプルで本件の問題解決に至りました。ただScrollTriggerの処理が複雑化しすぎているせいか ScrollTriggerの処理後に記述すると動作しないという新たな問題も出てきました... JavaScript、GSAP共にまだ未熟でご回答いただきやすい質問の仕方ではないのにもかかわらず複数の有識者にご回答いただけて感謝いたします。ありがとうございました。

こちらはどうですか？ > history.scrollRestoration = "manual"; > [History: scrollRestoration プロパティ - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/History/scrollRestoration)

Lhankor_Mhyさんのhistory.scrollRestorationで良いと思いますよ処理も非常に簡潔です ```javascript history.scrollRestoration = 'manual'; window.addEventListener('pageshow', ()=>{ window.scrollTo(0,0); }); .dummy{height:60%;} .dummy:nth-child(even){background-Color:lightgray;} ```

`DOMContentLoaded`は`document`に対してご使用ください。 ```html ``` ```javascript document.addEventListener("DOMContentLoaded", _ => { setTimeout(_ => window.scroll(0, 0), 1); }, false); ```

リロードするとページの先頭から再開する処理

実現したいこと

ページをリロードされたらリロードされた位置ではなく先頭から始まるようにしたい。

前提

ScrollTriggerでパララックスを実装しています。
横スクロールや状態変化などがあり、その位置でリロードすると表示が崩れてしまう為、
リロードで先頭に戻したいという意図です。
https://duck.school/en
https://www2.mejiro.ac.jp/univ/mejinavi2024/
リロード後の処理を上記の参考サイトのようにしたいと思っています。

試したこと

JavaScript
1window.addEventListener("DOMContentLoaded", () => {
2  window.scrollTo(0,0);
3});

上記のコードでリロード後先頭になるようにしようとしましたがこれは動作しませんでした。

JavaScript
1window.addEventListener("DOMContentLoaded", () => {
2  setTimeout(() => {
3    window.scrollTo(0,0);
4  }, 3000)
5});

setTimeoutで試すと動作するので私が読み込みのタイミングを理解できていないのかと思います。

ただこの方法で実装を試してみたものの参考サイトとは違う挙動のような気がしています。

どう実装するのがいいのかご教授いただけると幸いです。
よろしくお願いいたします。

追記

history.scrollRestoration = "manual";
こちらがシンプルで本件の問題解決に至りました。
ただScrollTriggerの処理が複雑化しすぎているせいか
ScrollTriggerの処理後に記述すると動作しないという新たな問題も出てきました...
JavaScript、GSAP共にまだ未熟でご回答いただきやすい質問の仕方ではないのにもかかわらず
複数の有識者にご回答いただけて感謝いたします。
ありがとうございました。

行動規範の内容に同意します

回答4件

ベストアンサー

こちらはどうですか？

history.scrollRestoration = "manual";
History: scrollRestoration プロパティ - Web API | MDN

投稿2024/03/29 06:03

Lhankor_Mhy

総合スコア37736

egawa

2024/03/29 08:42

ありがとうございます。 history.scrollRestoration知らなかったので試させていただきます。私のサイトが複雑になりすぎて思った動作にならないと思われますので原因を特定してまた質問を追記させていただければと思います。ご回答感謝いたします。

行動規範の内容に同意します

DOMContentLoadedはdocumentに対してご使用ください。

html
1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <body>
7    <div style="height: 10000px">
8    <script src="script.js"></scrpt>
9  </body>
10</html>

javascript
1document.addEventListener("DOMContentLoaded", _ => {
2  setTimeout(_ => window.scroll(0, 0), 1);
3}, false);

投稿2024/03/28 23:19

編集2024/03/28 23:58

Refrain

総合スコア684

egawa

2024/03/29 08:40

ありがとうございます。パララックスやアニメーションを色々実装しているせいか思った挙動になりません。アニメーション要素のないサイトに教えていただいたコードを使用すると動作するので今私が制作中のサイトでうまくいかないようです。原因がまだ分からないのでわかり次第質問に追記させていただきます。ご回答感謝いたします。

行動規範の内容に同意します

Lhankor_Mhyさんのhistory.scrollRestorationで良いと思いますよ
処理も非常に簡潔です

javascript
1<script>
2history.scrollRestoration = 'manual';
3window.addEventListener('pageshow', ()=>{
4  window.scrollTo(0,0);
5});
6</script>
7<style>
8.dummy{height:60%;}
9.dummy:nth-child(even){background-Color:lightgray;}
10</style>
11<div class="dummy"></div>
12<div class="dummy"></div>
13<div class="dummy"></div>
14<div class="dummy"></div>
15<div class="dummy"></div>