jack jack - 1 month ago 10
Javascript Question

how to scroll down|up animatedly in jquery css?

Basically I've a

a
element which on click get to execute:

<a href="#" class="hel" onclick="YPCP1_();">Scroll down</a>


and

function YPCP_(){
var scroll = $(window).scrollTop();
window.scrollTo(0, 600);
}


The function works fine and scroll down to
600
just fine. The problem is that it directly jumps to position
600
but I want it to slide down. something like
slide down and get to position 600 in 6sec
.

Hope that do not make any confusion and Thanks in Advance ( '_' )

Answer

You're looking for the jQuery animate() method (http://api.jquery.com/animate/).

You set the scrollTop position you want to end with and the time it will take to reach it. Something like this:

$('.content').animate({
    scrollTop: "+=" + 600
  }, 6000);

I've made a little fiddle so you can check out the whole concept: https://jsfiddle.net/L6uuve70/10/