生JSでページボトムボタンをスムーズスクロールしたい

Question

前提・実現したいこと

jQueryから書き換えを行っており、ページダウンボタンが上手く実装できません。
・ポリフィルを使わない

window.scrollTo({
  top: scrollPosition,
  behavior: "smooth"
});

を使わない方法を検索してもうまくできるものが見つかりませんでした。

発生している問題・エラーメッセージ

とにかくポリフィルを使いたくないので、jsだけで済ませたいです。

該当のソースコード

/* page-top / bottom button ---------------------------------- */
  let Btn = document.getElementById('page-top'),
    topBtn = document.getElementById('page-all'),
    bottomBtn = document.getElementById('page-bottom');
  window.addEventListener('scroll', function () {
    if (window.scrollY > 300) {
      Btn.classList.add('fadeIn');
      Btn.classList.remove('fadeOut');
    } else {
      Btn.classList.remove('fadeIn');
      Btn.classList.add('fadeOut');
    }
  })
  topBtn.addEventListener("click", function foo() {
    let nowY = window.pageYOffset;
    window.scrollTo(0, Math.floor(nowY * .9));
    if (nowY > 0) {
      window.setTimeout(foo, 10);
    }
  });
  // bottomBtn.addEventListener('click', scrollToBottom);
  // 上手い方法が見つかりませんでした。
  /* page-top / bottom button ------------------------------ end */

試したこと

window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })

Safari だと動かないそうなので、そしてbehavior: 'smooth'だとアニメーションが速いのでもっとゆっくりにしたいです。
ライブラリやポリフィルなしで実装できますでしょうか。

bottomBtn.addEventListener("click", function foo() {
    const goalOffset = document.body.scrollHeight - document.body.clientHeight;
    let nowY = goalOffset - window.pageYOffset;
    window.scrollTo(goalOffset, Math.floor(nowY * .9));
    if (nowY > 0) {
      window.setTimeout(foo, 10);
    }
  });

としたところ、初回は下までスムーズスクロールされるのですが、二回目以降度のボタンを押しても反応しませんんでした。
ページ全体が fixed が掛けられたように、マウスでのスクロールも出来ません。エラーは特になかったです。

補足情報（FW/ツールのバージョンなど）

Firefox 最新版、Safari 604.1

Answer 1

topBtnの挙動ができているのでしたら、bottomBtnの方も同じようにやればよいでしょう。

最終的なスクロールオフセットが0ではないので、

const goalOffset = document.body.scrollHeight - document.body.clientHeight;

ここに向かって行くとすると、

• nowY に相当するのは goalOffset から window.pageYOffset を引いた値
• scrollTo() に渡すのは goalOffset から上記の値を 0.9 倍したものを引いた値

Comments

[erp]

ありがとうございます。
教えていただいたようにやってみましたが、上手くいきませんでした。初回はスクロールされますが、2回目以降が動きません。
質問に追記しました。

[int32_t]

scrollTo() の引数が間違ってますね。

[erp]

scrollTo() の引数、分かりませんでした。どこが違うのでしょうか。
コードをご教示いただけますと大変助かります。どうぞよろしくお願いいたします。

[int32_t]

scrollTo(0, goalOffset - Math.floor(nowY * .9)) でしょう。

[erp]

ありがとうございます。思ったように実装できました。大変助かりました。