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代码，用于在单击包装器时从上到下，从下到上滚动。这段代码有效，但我希望这应该从顶部tp底部和底部到顶部慢慢滚动，当点击“包装”div

这是我原来的小提琴

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');
      });
    }
  });
});

Fiddle is here

点击同一个div时如何从上到下，从下到上缓慢滚动？

1 个答案: