1 个按钮上的 jQuery 多个功能答案

【问题标题】：jQuery Multiple Functions on 1 Button1 个按钮上的 jQuery 多个功能
【发布时间】：2013-03-02 00:42:06
【问题描述】：

所以我有一个按钮，我正在尝试使用多个功能。在页面加载时，上面的 div 被隐藏，一旦单击按钮，它将使 div 可见并滚动到顶部。我可以让两者分开工作，但不能一起工作。有人能指出我做错了什么吗？

$(function () {
    $("#work").hide();
    $(".button").bind("click", function () {
        $("#work").show();
    });
    $(".button").click(function () {
        $('html, body').animate({
            scrollTop: $("#work").offset().top
        }, 2000);
    });
});

更新 1：

添加了一个小提琴：http://jsfiddle.net/5qQJN/1/

更新 2：

所以它设法工作，但只有在你点击一次之后。假设您单击它，跳到顶部，再次向下滚动单击，然后它会滚动动画.. 这是否意味着我需要加载窗口？

【问题讨论】：

标签： jquery function html jquery-animate

【解决方案1】：

$(function () {
    $("#work").hide();
    $(".button").click(function () {
        $("#work").show();
        $('html, body').animate({
            scrollTop: $("#work").offset().top
        }, 2000);
    });
});

组合它们应该可以工作，因为似乎没有动态加载。

【讨论】：

^ this -- 我想知道为什么两个点击处理程序是必需的，这可能是 OP 的示例代码过于简化了。
感谢您的回复和编辑。但是仍然没有骰子，当我单击按钮时，div 会出现，它会滚动到顶部，但没有动画，只是直接跳转。
你能用你的 HTML 更新你的问题吗，如果可能的话，用一个 jsFiddle 来说明问题。
所以它设法工作，但只有在你点击一次之后。假设您单击它，跳到顶部，再次向下滚动单击，然后它会滚动动画.. 这是否意味着我需要加载窗口？

【解决方案2】：

我为你做了一个小提琴：http://jsfiddle.net/FaC4r/

看起来它在那里工作。不过，如果您提供了 HTML，它会有所帮助。

THE DIV IS HIDDEN UP HERE - SCROLL DOWN FOR BUTTON
<div id="work"></div>

<div id="spacer"></div>

<input type="button" class="button" value="CLICK ME TO SHOW 'WORK' AND SCROLL UP TO IT">

[根据评论更新]

我用你的新 HTML 为你编辑了 Fiddle：http://jsfiddle.net/FaC4r/2/

似乎您的 CSS 指定了一个填充为 0 的工作 div，再加上 div 中没有任何内容的事实，这意味着它是不可见的！您可以在上面的小提琴中看到，我在填充中使用 2em 以确保我实际上看到了 div 的增长和扩展。

我想说——这对于你编程生涯中的所有事情来说都是如此——使用工作示例作为基础，并逐步添加你的特定要求。尽早并经常测试。添加一件事并测试以确保它达到了您的预期。一旦你建立了一定的舒适度，你就可以扩展这个迭代周期。

希望对您有所帮助！ :)

【讨论】：

感谢您的帮助.. 奇怪的是我觉得它应该可以工作，但由于某种原因它不是。如果你注意到任何让我知道的东西，我就扔了一个小提琴，我在代码方面还是相当新的。再次感谢。