Форум

JohnJohn · #1 (**permalink**) 13.06.2017, 21:12

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

Хочу сделать плавный скроллинг страницы по менюшке на чистом 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>

рони · #2 (**permalink**) 13.06.2017, 21:50

JohnJohn,
https://learn.javascript.ru/js-animation

JohnJohn · #3 (**permalink**) 14.06.2017, 00:08

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

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);
    }

рони · #4 (**permalink**) 14.06.2017, 00:21

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>

JohnJohn · #5 (**permalink**) 14.06.2017, 15:31

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

рони · #6 (**permalink**) 14.06.2017, 16:14

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

JohnJohn · #7 (**permalink**) 15.06.2017, 02:09

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

Форум

Справочник

Discord чат

Курсы javascript