Question

我正在将内容添加到正文的顶部。有时候这个内容可以是400-500px高，当这样的内容被添加时，在你阅读页面时推倒内容可能会非常烦人。

我想要自动添加商品，而不是点击此处查看新商品。

有没有办法在不移动页面的情况下将此内容添加到正文顶部？然后，当用户滚动到顶部时，它就在那里？

Answer 1

我认为最常用的方法是在修改之前和之后简单地测量文档高度：

var old_height = $(document).height();  //store document height before modifications
var old_scroll = $(window).scrollTop(); //remember the scroll position

//do anything
$("p:first").prepend( "<p>I just became first</p>" );

$(document).scrollTop(old_scroll + $(document).height() - old_height); //restore "scroll position"

这样你就可以在没有窗口远离你正在阅读的内容的情况下做任何事情：）

Answer 2

我过去通过预先添加元素，然后计算它们的总外部高度，并将scrolltop设置为该值来完成它。像这样：

var $current_top_element = $('body').children().first();
$('body').prepend(other_elements);

var previous_height = 0;
$current_top_element.prevAll().each(function() {
  previous_height += $(this).outerHeight();
});

$('body').scrollTop(previous_height);

希望这能指出你正确的方向。

Answer 3

我采取了略微不同的方法：

首先获取正文的第一个元素（或者如果你假装身体以外的其他元素是我需要的那个元素），那么在预先添加新的元素集之后，使用偏移（如果需要相对于主体滚动）或位置（如果需要相对于祖先元素滚动）功能在原始的第一个元素上获取其更新的坐标并滚动到该点。

类似的东西：

var current_top_element = $('body').children().first();
$('body').prepend(other_elements);

$('body').scrollTop(current_top_element.offset().top);

或者除了身体滚动之外的其他内容：

var current_top_element = $('#ul-element-id li:first'); //example with a list
$('#ul-element-id').prepend(other_elements);

$('#ul-element-id').scrollTop(current_top_element.position().top);

请注意 position（）返回元素相对于其偏移父的位置，因此请确保根据需要设置父元素的css position属性（{ {3}}）

有关详细信息，请参阅： http://api.jquery.com/offsetParent/

Answer 4

我知道，我对这个话题已经很晚了。很抱歉没有取消它，但我发现了一种非常简单的方法，可以防止在将元素添加到正文时滚动到顶部。

当滚动Y位置为零时，自动滚动会附加。只需这样做：

element.scrollTo(0, 1);

并且您的元素在前置后不会自动转到顶部。

如何防止前置滚动？

4 个答案: