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的回答。那个效果很好。

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

2 个答案: