「トップへ戻る」の動きについて
簡潔なのですが、トップへ戻るボタンをクリックしたらスムースに動く設定は追加することはできますでしょうか。
CSSのscroll-behaviorではやっぱり雑なので、好みのタイプ（速さ・イージングなど）で設定できると嬉しいです！
6 Replies
CSSでは今のところできる手段がないのでJSで追加することになるんでしょうけど、まだいい案が思いつかないです。どうやって実装するのがいいんでしょうかねー。
僕が手元に残してるJSではだいたい3タイプ用意してて、 easeInOutQuint > easeInOutCubic > easeInOutQuad で、サイトによって使い分けてます。ただの強弱ですね。これをON/OFFできて、選択できるUIがカスタマイズの部分にあれば行けそうな気がしますね。あとは完了時間の設定があれば。
document.querySelector('#scroll-page-top a').addEventListener('click', function(e) {
e.preventDefault();
smoothScrollTo(0, 1500); ←完了までの時間
});
jsの書き方は色々あると思うので一例ですが（僕が自信ない）
カスタマイズ ＞ フッターメニュー - ページ上部へ戻るボタン
設定する場所はこの辺ですかね。
サイト全体にあっても問題ないコードなので、フッターにインラインで出力されても問題ない気がします。ちなみに、これでちゃんとNishiki Proでもイージングアニメーションができます。超簡単なアニメーションですが…
あらかじめ数パターン作っておいて、カスタマイザーで切り替えができる（CSSのクラスを付与）
という案があるので、開発進めてみます。
これの実装考えているんですけど、ページトップへ戻るだけでいいんですかね。目次などページ内リンクも同じような動きを適用するのが自然ですよね。
ですね、共通できたら良いですね！
共通させるとなると、スムーススクロールのコード全体の見直しが必要になってきますねー。vanilla js で cubic bezier で制御できるスムーススクロールのサンプルとか参考がありましたら教えてくださいー。
ちょっと急ぎ案件がたてこんでいるので一段落したら探ってみます！