Scroll smoothly to specific element on page

by

Super smoothly with requestAnimationFrame

For smoothly rendered scrolling animation one could use window.requestAnimationFrame() which performs better with rendering than regular setTimeout() solutions.

A basic example looks like this. Function step is called for browser’s every animation frame and allows for better time management of repaints, and thus increasing performance.

function doScrolling(elementY, duration) { 
  var startingY = window.pageYOffset;
  var diff = elementY - startingY;
  var start;

  // Bootstrap our animation - it will get called right before next frame shall be rendered.
  window.requestAnimationFrame(function step(timestamp) {
    if (!start) start = timestamp;
    // Elapsed milliseconds since start of scrolling.
    var time = timestamp - start;
    // Get percent of completion in range [0, 1].
    var percent = Math.min(time / duration, 1);

    window.scrollTo(0, startingY + diff * percent);

    // Proceed with animation as long as we wanted it to.
    if (time < duration) {
      window.requestAnimationFrame(step);
    }
  })
}

For element’s Y position use functions in other answers or the one in my below-mentioned fiddle.

I set up a bit more sophisticated function with easing support and proper scrolling to bottom-most elements:
https://jsfiddle.net/s61x7c4e/

More Related Contents:

  1. javascript show intro animation, then website
  2. How to fade animate background images (full size) [closed]
  3. Scroll Function working in reverse order [closed]
  4. How to check if element is visible after scrolling?
  5. jQuery load more data on scroll
  6. Prevent scrolling of parent element when inner element scroll position reaches top/bottom?
  7. Event when user stops scrolling
  8. jQuery scroll() detect when user stops scrolling
  9. Trigger event when user scroll to specific element – with jQuery
  10. Smooth scroll to div id jQuery
  11. Keep overflow div scrolled to bottom unless user scrolls up
  12. Animate element to auto height with jQuery
  13. How to scroll to top of page with JavaScript/jQuery?
  14. How to detect scroll position of page using jQuery
  15. event.wheelDelta returns undefined
  16. How to do a horizontal scroll on mouse wheel scroll?
  17. Make scrollbar visible in mobile browsers
  18. How to load images dynamically (or lazily) when users scrolls them into view
  19. How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?
  20. CSS3-Animate elements if visible in viewport (Page Scroll)
  21. Synchronized scrolling using jQuery?
  22. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  23. Detect if a page has a vertical scrollbar?
  24. Reverse Scrolling
  25. How to determine scroll direction without actually scrolling
  26. ScrollTo function in AngularJS
  27. JQuery – animate moving DOM element to new parent?
  28. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  29. Scrolling Overflowed DIVs with JavaScript
  30. Jquery/Javascript Opacity animation with scroll

Leave a Comment