0

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

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

4

2 回答 2

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

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

于 2013-03-13T21:00:04.480 回答
0

我为你做了一个小提琴：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 的增长和扩展。

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

希望有帮助！:)

于 2013-03-13T21:07:03.693 回答