javascript scroll div into view with smooth scroll effect?

Question

I am using the following javascript code to scroll my div into view when a user click on a div.

    <script>
    function showDiv2() {
   document.getElementById('about').style.display = "none";
   document.getElementById('terms').style.display = "none";
   document.getElementById('breaker').style.display = "block";
   document.getElementById('contact_us').style.display = "block";
   document.getElementById( 'contact_us' ).scrollIntoView('slow');
}
</script>

this code works and scrolls the div into view, but there is no effect, instead of the page scrolling smoothly down to my div it sort of just jumps to the div. Is there a way I can make this smoothly and slowly scroll down to my div? Thanks

Answer 1

According to Element.scrollIntoView() documentation try this:

element.scrollIntoView({block: "end", behavior: "smooth"});

but you must remember that this is an experimental feature and works good only in Firefox

Answer 2

For a more comprehensive list of methods for smooth scrolling, see my answer here .

---

To scroll to a certain position in an exact amount of time, window.requestAnimationFrame can be put to use, calculating the appropriate current position each time. To scroll to an element, just set the y-position to element.offsetTop .

/*
   @param pos: the y-position to scroll to (in pixels)
   @param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

Demo:

 function scrollToSmoothly(pos, time) { var currentPos = window.pageYOffset; var start = null; if(time == null) time = 500; pos = +pos, time = +time; window.requestAnimationFrame(function step(currentTime) { start = !start ? currentTime : start; var progress = currentTime - start; if (currentPos < pos) { window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos); } else { window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time)); } if (progress < time) { window.requestAnimationFrame(step); } else { window.scrollTo(0, pos); } }); } document.getElementById("toElement").addEventListener("click", function(e){ scrollToSmoothly(document.querySelector('div').offsetTop, 500 /* milliseconds */); }); document.getElementById("backToTop").addEventListener("click", function(e){ scrollToSmoothly(0, 500); });

 <button id="toElement">Scroll To Element</button> <div style="margin: 1000px 0px; text-align: center;">Div element <button id="backToTop">Scroll back to top</button> </div>

The SmoothScroll.js library can also be used, which supports scrolling to an element on the page in addition to more complex features such as smooth scrolling both vertically and horizontally, scrolling inside other container elements, different easing behaviors, scrolling relatively from the current position, and more.

 document.getElementById("toElement").addEventListener("click", function(e){ smoothScroll({toElement: document.querySelector('div'), duration: 500}); }); document.getElementById("backToTop").addEventListener("click", function(e){ smoothScroll({yPos: 'start', duration: 500}); });

 <script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/SmoothScroll@1.2.0/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script> <button id="toElement">Scroll To Element</button> <div style="margin: 1000px 0px; text-align: center;">Div element <button id="backToTop">Scroll back to top</button> </div>