Scroll smoothly to specific element on page

Question

I want to have 4 buttons/links on the beginning of the page, and under them the content.

On the buttons I put this code:

<a href="#idElement1">Scroll to element 1</a> <a href="#idElement2">Scroll to element 2</a> <a href="#idElement3">Scroll to element 3</a> <a href="#idElement4">Scroll to element 4</a> 

And under links there will be content:

<h2 id="idElement1">Element1</h2> content.... <h2 id="idElement2">Element2</h2> content.... <h2 id="idElement3">Element3</h2> content.... <h2 id="idElement4">Element4</h2> content.... 

It is working now, but cannot make it look more smooth.

I used this code, but cannot get it to work.

$('html, body').animate({     scrollTop: $("#elementID").offset().top }, 2000); 

Any suggestions? Thank you.

Edit: and the fiddle: http://jsfiddle.net/WxJLx/2/

Answer 1

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/

Answer 2

Question was asked 5 years ago and I was dealing with smooth scroll and felt giving a simple solution is worth it to those who are looking for. All the answers are good but here you go a simple one.

function smoothScroll(){     document.querySelector('.your_class or #id here').scrollIntoView({         behavior: 'smooth'     }); } 

just call the smoothScroll function on onClick event on your source element.

DOCS: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Note: Please check compatibility here

3rd Party edit

Support for Element.scrollIntoView() in 2020 is this:

Region            full   + partial = sum full+partial Support Asia              73.24% + 22.75%  = 95.98% North America     56.15% + 42.09%  = 98.25% India             71.01% + 20.13%  = 91.14% Europe            68.58% + 27.76%  = 96.35%