Как сделать плавный scroll к определённому элементу?

Question

Всем добрый день. Пытаюсь сделать плавный scroll к элементу , использую scrollIntoView с параметром behavior: 'smooth' , но всё равно скорость прокрутки для меня высокая. Есть ли возможность как нибудь контролировать время прокрутки. Облазил весь codepen и google но все варианты были с использованием jQuery.

let one = document.getElementById('one');
        let two = document.getElementById('two');
        let three = document.getElementById('three');
        let btn = document.getElementById('btn');
        btn.addEventListener('click', handleScroll);
        function handleScroll(e) {
            event.stopPropagation();
            console.log('yes');
            two.scrollIntoView({
                behavior: 'smooth',
            });
        }

.section {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 5rem;
            text-transform: uppercase;
            color: azure;
        }
        .one {
            background-color: aqua;
        }
        .two {
            background-color: aquamarine;
        }
        .three {
            background-color: cornflowerblue;
        }

 <button id="btn">Скролл ко 2 элементу</button>
        <div class="section one" id="one">Section 1</div>
        <div class="section two" id="two">Section 2</div>
        <div class="section three" id="three">Section 3</div>

Answer 1

Вот такой вот вариант:

const element = document.querySelector(".this");

const button = document.querySelector("input");



const scrollTo=()=>{
      const step = 7;
      if(element.offsetTop < window.pageYOffset + step){  
         document
                 .documentElement
                 .scrollTo(0,element.offsetTop );
      }else{
         document
                 .documentElement
                 .scrollTo(0,window.pageYOffset+step);
      }
      if(element.offsetTop !== window.pageYOffset)requestAnimationFrame(scrollTo)
      

}

button.addEventListener("click",scrollTo)

div{
  min-width:200px;
  min-height:200px;
  background:black;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:bold;
  margin-bottom:20px;
}

<input type="button" value ="Move to 4"/>
<div>1</div>
<div>2</div>
<div>3</div>
<div class="this">4</div>
<div>5</div>

БЛОГ НА HUSL

Как сделать плавный scroll к определённому элементу?

Ответы (1 шт):