全页平滑滚动

Question

I'm using this code to use smooth scrolling in my website ( demo ):

$("#click-me").click(function(){
  $('html,body').animate({
    scrollTop: window.screen.availHeight
  }, 200);
});

I'm trying to scroll so exactly the height of the page. However, it seems to scroll past this point. I've tried putting in "100%" as a value, but it didn't work.

What is causing this problem, and what should I do to fix it?

Thanks!

Answer 1

It's working correctly but unless you add this (or account for padding and margin on body), the result is slightly off.

body{
  padding:0;
  margin:0;
}

http://jsfiddle.net/bb9ux/2/ (non-working version: http://jsfiddle.net/bb9ux/3/ )

Answer 2

Scroll to particular div:

$("#click-me").click(function(){
  $('html, body').animate({
        scrollTop: $('#scroll-here').offset().top
    }, 2000);
});

FIDDLE