jquery - Scrolling through divs, keeps jumping to top of the page -

The first click takes the user under the box. The second click should be taken by the user under the that box. However, it is not. It just jumps on top of the browser, and stays there.

How can I fix this? Click (function () {$ ("body"). Animate ({scrollTop: $ ('.box1') [0] .scrollHeight}, 1000);}); $ (". Box2") (function () {$ ("body"). Animate ({scrollTop: $ ('. Box2') [0] .scrollHeight}, 1000);});});

Try it out,

  $ (document) Animate ($ function () {$ ("body"). ({ScrollTop: $ (this). Position (). Top + this.scrollHeight}, 1000);});});   
 Demo -