Javascript-форум - Плавный скроллинг к эллементу

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Плавный скроллинг к эллементу (https://javascript.ru/forum/misc/69313-plavnyjj-skrolling-k-ehllementu.html)

Плавный скроллинг к эллементу

День добрый, подскажите, пожалуйста.

Хочу сделать плавный скроллинг страницы по менюшке на чистом js. Мучаюсь второй день, не могу разобраться, что не так. Есть такой вариант, который естественно неправильный. Сторого не судите.

<style> 
html, body {
 height:100%;
}
</style>
<body>
<div class="nav1" style= 'position:fixed;'>
    <ul id="nav" onclick="event.preventDefault()">
        <li><a href ="#aboutus" onclick="scrollMenu('aboutus')"> about us </a></li>
        <li><a href="#products" onclick="scrollMenu('products')">products</a></li>
    </ul>
</div>

<div id="aboutus" style="height: 100%;">First</div>
<div id='products' style="height: 100%;">Second</div>

<script>
 function scrollMenu(Id) {
     element = document.getElementById(Id).scrollIntoView();
     function scrollToElement(scrollDuration) {
          var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var scrollStep = window.scrollTo(0, element) / (scrollDuration / 15),
             scrollInterval = setInterval(function(){
                 if ( scrollTop != element.getBoundingClientRect()) {
                     window.scrollBy( 0, scrollStep );
                     } else clearInterval(scrollInterval);
    },15);
}
scrollToElement(1000);
}
</script>
</body>

читаю уже в какой раз и не могу понять, как правильно написать в данном случае анимацию.

function scrollMenu(Id) {
     element = document.getElementById(Id).scrollIntoView();
     var start = Date.now();

      var timer = setInterval(function() {

        var timePassed = Date.now() - start;

       //не понимаю, что здесь надо написать

        if (timePassed > 2000) clearInterval(timer);

      }, 20);
    }

плавный скролинг к элементу на js

JohnJohn,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
html, body {
 height:100%;
}
#aboutus{
  background-color: #228B22;
}
#products{
  background-color: #FF1493;
}

</style>


  <script>
function anim(duration) {
    var temp;
    return function(sel) {
        cancelAnimationFrame(temp);
        var start = performance.now();
        var from = window.pageYOffset || document.documentElement.scrollTop,
        to = document.querySelector(sel).getBoundingClientRect().top;
        requestAnimationFrame(function step(timestamp) {
            var progress = (timestamp - start) / duration;
            1 <= progress && (progress = 1);
            window.scrollTo(0, from + to * progress | 0);
            1 > progress && (temp = requestAnimationFrame(step))
        })
    }
};

var scrollMenu = anim(2000)
  </script>
</head>

<body>
<div class="nav1" style= 'position:fixed;'>
    <ul id="nav" onclick="event.preventDefault()">
        <li><a href ="#aboutus" onclick="scrollMenu('#aboutus')"> about us </a></li>
        <li><a href="#products" onclick="scrollMenu('#products')">products</a></li>
    </ul>
</div>

<div id="aboutus" style="height: 100%;">First</div>
<div id='products' style="height: 100%;">Second</div>



</body>
</html>

Спасибо, все четко работает, если Вам не тяжело, не могли бы объяснить 30 - 33 строки, не совсем понимаю.

JohnJohn,
progress ---- процент выполнения анимации, величина от 0 до 1 (от 0% до 100%)
если времени прошло больше чем отведено, progress > 100%, то
строка 31 корректируем progress = 1 (100%).
строка 32 вычисляем прирост from + to * progress
ноль вместо floor, помогает получить целое число
строка 33 если не 100% зацикливаем

Спасибо за разъяснение.