Question

所以我有一个按钮，我正在尝试使用多个功能。在页面加载时，上面的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：

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

Answer 1

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

组合它们应该有效，因为似乎没有动态加载。

Answer 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编辑了小提琴：http://jsfiddle.net/FaC4r/2/

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

我会说 - 对于编程生涯中的所有事情都是如此 - 使用工作示例作为基础并逐步添加您的特定要求。经常测试。添加一件事并测试以确保它达到了您的预期。一旦建立了一定的舒适度，您就能够延长该迭代周期。

希望有所帮助！：）

jQuery在1个按钮上的多个功能

2 个答案: