2

I am using the window.scrollTo(); method on a button click. But, when I click the button, it just jumps to the position. I want it to physically display the scrolling to the position of the window. How can I do this?

AstroCB
  • 12,337
  • 20
  • 57
  • 73
Harry
  • 772
  • 10
  • 32
  • 1
    Execute `.scrollTo` 60 times per second and calculate the location it should be at at time `t`. – Derek 朕會功夫 Sep 25 '14 at 19:41
  • @Derek朕會功夫 not sure what you mean, could you elaborate? – Harry Sep 25 '14 at 19:45
  • Create a linear function where the horizontal axis is t (time) and the vertical axis is y (scrollTop). Repeatedly change the scrollTop to the corresponding y value with the time until it reaches the expected scrollTop. There's a bit math involved, and if you even want to add in [easing with cosine/sine](http://easings.net/en) it would be much messier. If you prefer jQuery, here's an example with all those math handled by jQuery: http://jsfiddle.net/DerekL/ewpx30av/ – Derek 朕會功夫 Sep 25 '14 at 19:52
  • (Duplicate) Take a look at this response: http://stackoverflow.com/questions/16475198/jquery-scrolltop-animation – Mazyad Sep 25 '14 at 20:17

1 Answers1

1

Jquery is the best answer for this. It makes it really simple

$('html, body').animate({
    scrollTop: $(".the_div_you_want_to_got_to").offset().top
 }, 1750);

If you have not used Jquery before, it is a javascript extension. You will need to include it in the head of your doc

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
silversunhunter
  • 1,219
  • 2
  • 12
  • 32