jquery - 扩展固定标题，重置页面上的滚动位置

Question

我有一个固定的标题。当您单击标题中的按钮时，我将底部展开以显示更多内容。但是，如果您已经向下滚动了一些页面，单击按钮会将滚动位置重置到页面顶部。

我做了一个jsfiddle来演示效果：http: //jsfiddle.net/YeW9L/

$(document).ready(function () {
    $('.action').click(function () {
        $('#border').animate({
            height: 200
        }, 400);
    });
});

我认为通过固定标题，它可以将其从内容流中删除。所以我不明白为什么改变它的高度会影响页面的其余部分。有人对此有解决方案吗？我希望页面滚动位置保持不变，无论页眉展开时您在页面上的哪个位置。

谢谢

Answer 1

您需要阻止默认的单击处理程序运行。

http://jsfiddle.net/YeW9L/1/

$(document).ready(function () {
    $('.action').click(function (e) {
        e.preventDefault();
        $('#border').animate({
            height: 200
        }, 400);
    });
});

Answer 2

我认为正在发生的事情是<a>标签链接到同一页面。

为了防止这种情况，您可以设置href="javascript:void(0)"保留标签cursor: pointer;提供的效果。<a>

如果您不想这样做，您可以href完全删除该属性并cursor: pointer;手动应用。

或者你可以选择 Ryan Pilbeam 的回答。那个效果很好。