单击同一div时，如何从上到下和从下到上缓慢滚动

Question

$(document).ready(function() {
      $("#Wrapper").click(function () {
    var th = $(this);
    if (!th.hasClass('down')) {
        console.log("ret");
        th.addClass('down').stop(true).animate({
            "top": "50px"
        }, 1000, function() {
            $('body').scrollTop(th.height());
        });
    } else {
        console.log("sdffsdsff");
        th.removeClass('down').stop(true).animate({
            "top": "-400px"
        }, 1000, function() {
            $('body').scrollTop(th.scrollTop());
        });
    }
});

}(;

我有这个jquery代码，用于在单击包装器时从上到下和从下到上滚动。这段代码有效，但我希望当单击"包装器"div 时，它应该从顶部 tp 底部和底部到顶部缓慢滚动

这是我的原创小提琴

http://jsfiddle.net/HtTXB/9/

怎么做呢？ 进一步的更多建议 改进动画 真的很感激。提前谢谢。

Answer 1

您当前所做的是将包装器本身的位置设置为动画，这是您看不到的，当此动画完成后，您可以跳转到"顶部/底部"。您应该对滚动进行动画处理，而不是对位置进行动画处理：

$(document).ready(function() {
  $("#Wrapper").click(function () {
    var th = $(this),
        toSCroll = $('html,body');
    if (!th.hasClass('down')) {
      // animate the scrolling for body/html
      toScroll.stop(true).animate({
        scrollTop: th.height()
        }, 1000, function() {
          // add class when ani is done
          th.addClass('down');
        });
    } else {
      toScroll.stop(true).animate({
        scrollTop: th.get(0).offsetTop /* or 0 for page top*/
      }, 1000, function() {
        th.removeClass('down');
      });
    }
  });
});

小提琴来了。