Sanftes Scrollen zu Element mit Vanilla JavaScript

Question

Ich habe einige Probleme, die versuchen, mit JavaScript zu einem Element reibungslos zu scrollen.

Ich habe eine einseitige Website mit 3 Links. Wenn ich auf einen der Links klicke, möchte ich glatt zu dem Abschnitt blättern, den es darstellt. Ich habe eine jQuery-Version, und das funktioniert großartig, aber ich würde gerne lernen, wie man das gleiche Ergebnis mit Vanilla JavaScript erreicht.

Die Frage wurde schon einmal gestellt, aber die Antworten sind ein bisschen kompliziert. Ich glaube, es sollte eine sauberere und einfachere Antwort darauf geben.

Danke.

jQuery-Code:

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

Answer 1

Sie werden einige Beschleunigungsfunktionen für glatte Vanille js Scrollen müssen.

Robert Penner ist die Lockerung Mann

Ich habe ein demo on jsbin ich einige Zeit für einen HTML5-Kurs vor tat. Sie könnten an den Quellen interessiert sein.

Demo-Funktion zum Blättern im Beispiel oben:

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