0

我的代码有几个小问题。我已经编写了一个 JQUERY 序列，您可以在其中单击“注册”，然后向下滚动到表单显示的位置。现在我在底部有一个按钮，该功能关闭表单并将您滚动回顶部。

该示例可以在这里看到：http: //www.icecable.com/sandbox/priority%5Fsign%5Fup/test.html

单击“立即注册”，动画可以正常工作。单击“关闭并返回顶部”，动画再次正常工作。问题出现在这之后。

如果您尝试单击任一“立即注册”按钮，“高度”动画会正常开始，但“scrollTop”动画会出现很大延迟，原因不明。

这是我的代码

$(document).ready(function() {

$('.dealer').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '860'
    }, 1800, "easeInOutQuint");
});

$('.top').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '0px'
    }, 1500, "easeInOutQuint");
});

$('.dealer').click(function(e) {
    e.preventDefault();
  $('#priority').animate({
    height: 'show'
    }, 1200,  "easeInOutCirc");
});

$('.top').click(function(e) {
    e.preventDefault();
  $('#priority')
    .animate({
        height: 'hide'
        }, 590, "easeInQuint");

});

//Form for Distributors

$('.distributor').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '860'
    }, 1800, "easeInOutQuint");
});

$('.top').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '0px'
    }, 1500, "easeInOutQuint");
});

$('.distributor').click(function(e) {
    e.preventDefault();
  $('#distributor').animate({
    height: 'show'
    }, 1200,  "easeInOutCirc");
});

$('.top').click(function(e) {
    e.preventDefault();
  $('#distributor')
    .animate({
        height: 'hide'
        }, 590, "easeInQuint");

    });
});

有什么我做错了吗？表格再次隐藏后有没有办法重置事件？任何帮助/见解/资源将不胜感激！

将要

4

1 回答 1

0

没有小提琴，我不能肯定地说，但我建议你使用一些console.log调用来打印出开始和结束scrollTop值。我以前遇到过一些类似的问题，它们通常是由于滚动错误金额和恢复到错误金额的问题。

您可能没有注意到的可能情况是，当您向上滚动时，您的scrollTop值会超出0某个负数。窗口不能滚动到负数scrollTop，因此它必须“等待”直到值返回，0然后才能开始可见动画。

注意：即使您已将 设置scrollTop为零，也有可能发生这种情况，因为这可能不是它的初始位置。当我说“负数”时，我的意思是“相对于初始位置的负数”。

更新：看看这个页面。它还链接到相应的 SO 帖子，并告诉您如何平滑滚动到顶部。我以前使用过代码的修改版本，虽然它与您所拥有的非常相似，但 SO 帖子可能会给您一些额外的见解。

我还将您的animate函数更改为仅调用"html"元素，而不是"html"元素和"body"元素。

于 2013-03-20T20:07:33.793 回答