BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み】window.scrollTo()で滑らかな効果を出す方法【非公開

2022-04-14 02:17:51

質問

以下の方法で200pxまでスクロールできます。 

btn.addEventListener("click", function(){
    window.scrollTo(0,200);
})

しかし、私は滑らかなスクロール効果が欲しいのです。どうすればいいのでしょうか？

どのように解決するのですか？

2018年最新情報

を使用することができるようになりました。 window.scrollTo({ top: 0, behavior: 'smooth' }) を使用すると、スムーズな効果でページをスクロールさせることができます。 

const btn = document.getElementById('elem');

btn.addEventListener('click', () => window.scrollTo({
  top: 400,
  behavior: 'smooth',
}));

#x {
  height: 1000px;
  background: lightblue;
}

<div id='x'>
  <button id='elem'>Click to scroll</button>
</div>

旧ソリューション

このようなことができます。 

var btn = document.getElementById('x');

btn.addEventListener("click", function() {
  var i = 10;
  var int = setInterval(function() {
    window.scrollTo(0, i);
    i += 10;
    if (i >= 200) clearInterval(int);
  }, 20);
})

body {
  background: #3a2613;
  height: 600px;
}

<button id='x'>click</button>

ES6 再帰的アプローチ。 

const btn = document.getElementById('elem');

const smoothScroll = (h) => {
  let i = h || 0;
  if (i < 200) {
    setTimeout(() => {
      window.scrollTo(0, i);
      smoothScroll(i + 10);
    }, 10);
  }
}

btn.addEventListener('click', () => smoothScroll());

body {
  background: #9a6432;
  height: 600px;
}

<button id='elem'>click</button>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します