jquery - 滚动浏览 div，不断跳到页面顶部

Question

第一次单击会将用户带到框的底部。第二次单击应将用户带到该框的底部。然而，事实并非如此。它只是跳到浏览器的最顶部，并停留在那里。

我怎样才能解决这个问题？

$( document ).ready(function() {
    $(".box1").click(function() {
        $("body").animate({ scrollTop: $('.box1')[0].scrollHeight}, 1000); 
    });
    $(".box2").click(function() {
        $("body").animate({ scrollTop: $('.box2')[0].scrollHeight}, 1000);
    });    
}); 

Answer 1

试试这个： - 也添加 html 选择器

$( document ).ready(function() {
    $(".box1").click(function() {
        $("html,body").animate({ scrollTop: $('.box1')[0].scrollHeight}, 1000); 
    });
    $(".box2").click(function() {
        $("html,body").animate({ scrollTop: $('.box2')[0].scrollHeight}, 1000);
    });    
}); 

Answer 2

尝试这个，

$( document ).ready(function() {
    $(".box1, .box2").click(function() {
        $("body").animate({ scrollTop: $(this).position().top + this.scrollHeight}, 1000); 
    });
});

演示 - http://jsfiddle.net/TLQq4/