Question

我的代码遇到了一些小问题。我写了一个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");

    });
});

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

将

Answer 1

没有小提琴，我不能肯定地说，但我建议您使用一些console.log来打印以开始和结束scrollTop值。我以前遇到过这样的问题，而且通常是因为滚动错误的数量并恢复到错误的金额。

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

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

更新：查看this page。它还链接到corresponding SO post并告诉您如何顺利滚动到顶部。我之前使用过代码的修改版本，虽然它与你的代码非常相似，但SO帖子可能会给你一些额外的洞察力。

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

Jquery“scrollTop”＆amp; “身高”。点击延迟问题

1 个答案: