一般的に、長いページには一番上までスクロールするボタンがあり、ユーザーはそれをクリックすると、300ms以内にアニメーション効果で一番上までスクロールします。
最初は、こんなの簡単じゃないか、1行のコードで完璧じゃないか、と思いました。
$(document.documentElement).animate({scrollTop: 0}, 300);
これを使って頂上まで行くことは可能ですが、アニメーションはありません。
$(document.documentElement).scrollTop(0)
携帯電話でクリックしても反応しないことを知り、簡単すぎると思っていたこと、スクロールして上に移動するボタンには互換性の問題がたくさんあることに気づきました。
document.bodyは携帯電話では動作しますが、PCでは動作しません。
$(document.body).animate({scrollTop: 0}, 300);
console.log(document.body.scrollTop) // モバイルは値、PCは0
document.documentElementPCでは動作しますが、携帯電話では動作しません。
$(document.documentElement).animate({scrollTop: 0}, 300);
console.log(document.documentElement.scrollTop) // pcモバイルの値は0、IEの値は0だ。
document.documentElementつまり、PCでのスクロールは , で、モバイルでのスクロールは document.body です。
より良いAPIがなければ、スクロール要素は別の環境で処理する必要があり、明らかに少し面倒です。
document.scrollingElement document.scrollingElement.tagName PCではhtml、モバイルではbodyということがわかります。
問題解決をしながら、apiを検索します。
window.scrollTo({top: 0, behavior: "smooth"})
と思っていたのですが、jsの良心的なapiが見つかり、とても良いapiを提供し、一番上までスクロールできたり、アニメーションができたりと、その時々の互換性をチェックするのですが、実はiosは対応しておらず、弊害があり、本当に良いことがありません。
document.scrollingElement そのため、IEやオペラ、一部の低バージョンのブラウザが対応していないことを除けば、基本的にニーズを満たすことができます。
