Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.06.2017, 21:12
Аспирант
Отправить личное сообщение для JohnJohn Посмотреть профиль Найти все сообщения от JohnJohn
 
Регистрация: 04.06.2017
Сообщений: 46

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

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

Последний раз редактировалось JohnJohn, 13.06.2017 в 21:15.
Ответить с цитированием
  #2 (permalink)  
Старый 13.06.2017, 21:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

JohnJohn,
https://learn.javascript.ru/js-animation
Ответить с цитированием
  #3 (permalink)  
Старый 14.06.2017, 00:08
Аспирант
Отправить личное сообщение для JohnJohn Посмотреть профиль Найти все сообщения от JohnJohn
 
Регистрация: 04.06.2017
Сообщений: 46

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

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

плавный скролинг к элементу на 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>
Ответить с цитированием
  #5 (permalink)  
Старый 14.06.2017, 15:31
Аспирант
Отправить личное сообщение для JohnJohn Посмотреть профиль Найти все сообщения от JohnJohn
 
Регистрация: 04.06.2017
Сообщений: 46

Спасибо, все четко работает, если Вам не тяжело, не могли бы объяснить 30 - 33 строки, не совсем понимаю.
Ответить с цитированием
  #6 (permalink)  
Старый 14.06.2017, 16:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

JohnJohn,
progress ---- процент выполнения анимации, величина от 0 до 1 (от 0% до 100%)
если времени прошло больше чем отведено, progress > 100%, то
строка 31 корректируем progress = 1 (100%).
строка 32 вычисляем прирост from + to * progress
ноль вместо floor, помогает получить целое число
строка 33 если не 100% зацикливаем
Ответить с цитированием
  #7 (permalink)  
Старый 15.06.2017, 02:09
Аспирант
Отправить личное сообщение для JohnJohn Посмотреть профиль Найти все сообщения от JohnJohn
 
Регистрация: 04.06.2017
Сообщений: 46

Спасибо за разъяснение.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавный скроллинг wordpress не работает! killok Ваши сайты и скрипты 0 19.01.2016 02:22
Отсутствует плавный скроллинг по якорям kos0760 Элементы интерфейса 14 29.08.2015 02:41
Плавный скроллинг на больших Лендингах Altai Общие вопросы Javascript 2 25.02.2015 21:32
Плавный Скроллинг дока: JS vs Jquery vs Jquery + Плагины SegaMega Events/DOM/Window 1 27.12.2012 13:02
Плавный скроллинг kromol Элементы интерфейса 3 30.07.2011 12:40