JavaScript(Vanilla JS)を使ってページトップ戻るボタンの美しいスムーススクロールを実現します。
脱jQueryの第一歩としても良いのではないでしょうか。
目次
ページトップボタンのスクロールのコード
// ボタンを選択する
var btn = document.querySelector("#to-top");
// イージング機能 (easeOutExpo)
var easing = function (t) { return (t === 1) ? 1 : 1 * (-Math.pow(2, -10 * t) + 1); };
// ボタンがクリックされたとき
btn.addEventListener("click", function() {
// ページの現在のY位置を取得する
var currentY = window.pageYOffset;
// 指定された速度に基づき、スクロールアニメーションの総時間を計算する
var scrollDuration = 1000;
// スムーズなアニメーションでページ上部にスクロールする
window.scroll({
top: 0,
left: 0,
behavior: "smooth"
});
// ネイティブのスムーズスクロール動作をカスタムアニメーションでオーバーライドする
var start = null;
requestAnimationFrame(step);
function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
var ease = easing(progress/scrollDuration);
window.scrollTo(0, currentY - (currentY * ease));
if (progress < scrollDuration) {
requestAnimationFrame(step);
}
}
});
一番上のquerySelector()にはページトップボタンの要素を入力してください。
美しいといった理由
美しいと表現したのは、イージング(動き方)をeaseOutExpoにしているからです。
ボタンを押した際にシュっと動いて、目的地付近ではふわっと終わる。
この動き最高です。
イージングを変更したい場合は、easing
の中身をイージング関数からコピペして変更するだけです。
var easing = function (t) { ここを変更 };
あわせて読みたい


イージング関数チートシート
イージング関数はアニメーションの速度を指定して、動きをより自然にします。現実のオブジェクトは単に一定の速度で動かず、即座に動いたり止まったりしません。このページ…
裏話
実はこれAIであるChatGPTに作ってもらいました。
何度か質問を繰り返し、ほぼ理想のコードになりました。
ただこの関数、距離によっては最大6pxほど距離が足りないことがあるので、改善の余地はあるかもしれません。
また完璧と思えるコードができましたら更新します。
あわせて読みたい


【完全版】スムーススクロールの実装は全てこれでいい【LazyLoad対応】
純粋なJavaScript(VanillaJS)で、LazyLoad(遅延読み込み)にも対応させたスムーススクロールの実装方法をご紹介します。 今回作成したスムーススクロールは、以下の…
カスタマイズを自分でしてみませんか?
「機能を追加したい」「もう少しデザインを調整したい」と思ったらWeb制作のスクール「デイトラ」がおすすめです。
どのコースも10万円前後と他のスクールに比べても格安で、副業や転職に十分なスキルが身に付きます。
気になった方は、是非アクセスしてみてください。
コースの一部
ご質問などお気軽にコメントどうぞ