Q&A
問題は再現しませんでした。
スムースにスクロールしました。
Microsoft Edge 94
前提・実現したいこと
ボタンを押した際、ページトップへスムーズスクロールさせたいのですが、
JavaScriptのwindow.scrollToで、behavior: 'smooth'が適用されません。。
パっと一瞬でトップが表示されてしまいます。
エラーメッセージ
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="../css/index.css"> 7 <script src="../move/index.js"></script> 8 <title></title> 9</head> 10<body id="body"> 11 <div></div> 12 <a href="#body"> 13 <img id="scroll-icon" src="../images/move-icon.png" alt=""> 14 </a> 15</body> 16
JavaScript
1document.querySelectorAll('a[href^="#"]').forEach(link => { 2 link.addEventListener('click', e => { 3 e.preventDefault() 4 5 const target = document.querySelector(link.hash), 6 offsetTop = window.pageYOffset + target.getBoundingClientRect().top 7 console.log(target.getBoundingClientRect().top) 8 9 window.scrollTo({ 10 top: offsetTop, 11 behavior: 'smooth' 12 }) 13 }) 14})
補足情報
VSCode Node.js
ご回答ありがとうございます！
んーーなぜでしょうか・・・
キャッシュ削除なども試しましたがダメですね。。。
Edge Chrome 共にできませんでした。
わかりませんがHTMLも載せてみては
HTML追加いたしました。
やはり再現しませんね。
<body id="body">に行くのでトップに移動することは正しいと思いますし、スクロールもスムースです。
CodePenでも確認できます。
スクロールを確認するため、リンクの前の<div>の中に<pre>テキストを入れています。
ゴリラをクリックするとトップにスムースにスクロールします。
https://codepen.io/itagagaki/pen/MWvKmZW
ご丁寧にありがとうございます！
ゴリラをクリックすると、一瞬でトップに戻ってしまいます！
それならブラウザがおかしいとしか思えないですね。
何か拡張機能が入っているならすべて削除（無効化ではなく）してみることはできますか。
現在windowsで行っていますが、
Macで試したところゴリラクリックでスムーズにスクロールしました！
ブラウザに拡張機能などは特に入れてないと思います！
Google Chrome で chrome://flags を表示して、上のほうにある Search flags の欄に scroll と入力してください。Smooth Scrolling の項目が出てくると思います。それが Disabled になっていないか確認してみてください。
Defaultになっています！
ちなみに、Macからご提供いただいたゴリラはスムーススクロールできましたが、
質問で記載したコードを実行するとスムースにならないようです。
CodePenに貼ったJSコードは質問からのコピペなんですけどね。
キャッシュかもしれませんね。
スーパーリロードはしてみましたか？
各ブラウザでの強制リロード(スーパーリロード)まとめ
https://ao-system.net/note/69
キャッシュ削除・スーパーリロード行っても改善しないです????
Windowsの設定→簡単操作→Windows のシンプル化と個人設定の Windows にアニメーションを表示する がオフになっていませんか？
オフになっていたのでオンにしましたが、変化なしです????
オフになっていたのなら、それが原因と思われます。
オンにしてもオンにならないことがあるようです。
再度「設定」を開き直して確認してみてください。
オフに戻っているかもしれません。
なんなら再起動が必要かもしれません。
設定の確認・再起動ともに行いましたが、変化ありませんでした????
ゴリラもですか？
ゴリラは、ChromeでSmooth Scrolling設定をしたら改善しました。
試しにhtmlの<script>を呼ぶ場所を、
<head>内から</footer>と</body>の間にしたら適用されました！
とても丁寧なご対応ありがとうございました！！
設定関係も知らない事が多かったので勉強になりました！
そうか、aタグがロードされるより前にスクリプトが実行されてしまっていて、そのためaタグにイベントリスナーが登録されていなかったわけですね。
イベントリスナーが働いていないとしたらそもそもスクロールもしないはず…と思ってそのケースを頭から排除してしまいましたが、考えてみればaタグだからそのままでもクリックしたら普通に飛ぶわけですよね…
そうなんです????
移動はするのにと思っていましたが、そもそも適用されていませんでした。。
今度はスマホだとスクロールしてくれないです????
回答1件
0
自己解決
htmlの<script>を呼ぶ場所を、
<head>内から</footer>と</body>の間に変更で改善。それ以外の注意点として、itagagaki様からご教授頂きました、
ブラウザ内でのSmooth Scrolling設定や、
Windows設定の、Windows にアニメーションを表示するがオフになっている
などがありました。
投稿2021/10/16 06:23
総合スコア13
あなたの回答
tips
プレビュー
