IE(Internet Explorer)が去った今、スムーススクロールってめっちゃ簡単に書いてもいいのでは?と思い検証を兼ねてコードを実装してみます。
スムーススクロールをするにはちょっと文章量が多くないといけないので大変ですね。特に書くことも無いのにダラダラと文を書いています。
あ、そういえばうちの猫とうさぎがめちゃくちゃ仲良しでほっこりするんですよ。近くで一緒に寝たり、遊んで遊んで(猫から)とお誘いしたり、可愛くてしょうがないです。
守ってやるぜ
— くぅちゃんのお父ちゃん (@qoo_pa_pa) March 27, 2023
#猫好きさんと繋がりたい#うさぎ好きさんと繋がりたい pic.twitter.com/4lGDx2qS1Z
こんな感じでコロコロしてるんですよね……毎日デレデレさせていただいております。
と、前置きがちょうどよくなったのでスムーススクロールを実装したボタンを置いてみます。
わぉ、Chromeで快適にスムース!ちなみにCanIuseではbehaviorはIEだけ非対応、同じくscrollToもIEだけ非対応だと確認できたので、ほとんどこれで問題ないかもしれません。
あ、肝心のコードですが、
<button id="smoothBtn">スムース?</button>
<script>
document.getElementById("smoothBtn").addEventListener("click", function(){
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
</script>
これだけです。他のブラウザも見て見ましょう。
Edgeもスムース!Firefoxもスムース!以上PC!あ、Mac……机から取ってくるのめんどいので誰かお願い……
SPはどうでしょうね。
iPhone iOS(16.3)Safariす、スムース!iOS Chrome、スムース!
Andoridの端末机の引き出しの奥の方にあるから取ってきて!
おやおや、今後これで良いんじゃないかいね??