Плавно прокручивается элемент с помощью ванильного JavaScript.

Question

У меня возникают некоторые проблемы, пытающиеся плавно прокручивать элемент, используя ванильный JavaScript.

У меня есть одностраничный сайт с 3 ссылками. Когда я нажимаю одну из ссылок, я хочу гладкую прокрутку к разделу, который он представляет. У меня версия jQuery, и это отлично работает, но я хотел бы узнать, как добиться того же результата с помощью ванильного JavaScript.

Вопрос задан раньше, но ответы немного сложны. Я считаю, что для этого должен быть более чистый и легкий ответ.

Спасибо.

JQuery код:

$('a').click(function(){ 
    $('html, body').animate({ 
     scrollTop: $($(this).attr('href')).offset().top 
    }, 1000); 
    return false; 
}); 

Answer 1

Вам понадобятся некоторые функции замедления для гладкой Vanilla прокрутки расслоения плотных.

Robert Penner является ослабление человек

У меня есть demo on jsbin я сделал некоторое время назад на курс HTML5. Вас могут заинтересовать источники.

демонстрационная функция для прокрутки используется в приведенном выше примере:

function scrollToItemId(containerId, srollToId) { 

     var scrollContainer = document.getElementById(containerId); 
     var item = document.getElementById(scrollToId); 

     //with animation 
     var from = scrollContainer.scrollTop; 
     var by = item.offsetTop - scrollContainer.scrollTop; 
     if (from < item.offsetTop) { 
      if (item.offsetTop > scrollContainer.scrollHeight - scrollContainer.clientHeight) { 
       by = (scrollContainer.scrollHeight - scrollContainer.clientHeight) - scrollContainer.scrollTop; 
      } 
     } 

     var currentIteration = 0; 

     /** 
     * get total iterations 
     * 60 -> requestAnimationFrame 60/second 
     * second parameter -> time in seconds for the animation 
     **/ 
     var animIterations = Math.round(60 * 0.5); 

     (function scroll() { 
      var value = easeOutCubic(currentIteration, from, by, animIterations); 
      scrollContainer.scrollTop = value; 
      currentIteration++; 
      if (currentIteration < animIterations) { 
       requestAnimationFrame(scroll); 
      }  
     })(); 

     //without animation 
     //scrollContainer.scrollTop = item.offsetTop; 

    } 

    //example easing functions 
    function linearEase(currentIteration, startValue, changeInValue, totalIterations) { 
     return changeInValue * currentIteration/totalIterations + startValue; 
    } 
    function easeOutCubic(currentIteration, startValue, changeInValue, totalIterations) { 
     return changeInValue * (Math.pow(currentIteration/totalIterations - 1, 3) + 1) + startValue; 
    }