how to add Smooth scroll animation in pure javascript?

Question

I am using pure javascript for vertical scroll.I need this scroll to have smooth behaviour.

function move_up(scroll_nav)
    {
        var container = document.getElementById(scroll_nav);
        upScroll(container,'up',40,50,10);

    }

    function move_down(scroll_nav)
    {
        var container = document.getElementById(scroll_nav);
        upScroll(container,'down',40,50,10);

    }

    function upScroll(element,direction,speed,distance,step)
    {
        scrollAmount = 0;
        var slideTimer = setInterval(function(){
            if(direction == 'up'){
                element.scrollTop  -= step;
            } else {
                element.scrollTop  += step;
            }
            scrollAmount += step;
            if(scrollAmount >= distance){
                window.clearInterval(slideTimer);
            }
        }, speed);
    }

I need an animate function similar to the one in this link but without jquery. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_smooth_scroll_jquery

I need an animate function to be included Please provide an solution .

Nicky McCurdy · Accepted Answer · 2020-07-16 10:46:46Z

4

element.scrollTo({ top: ..., behavior: 'smooth' });

answered Jul 16, 2020 at 10:46

Nicky McCurdy

19.8k5 gold badges63 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jasmine Joseph Over a year ago

No I want to have smooth animate effect.Thanks for your code

Nicky McCurdy Over a year ago

That's what behavior: 'smooth' does developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions/…

Collectives™ on Stack Overflow

how to add Smooth scroll animation in pure javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related