Как предотвратить прокрутку на preend?

Я добавляю содержимое к вершине тела. Иногда это содержание может составлять 400-500 пикселей в высоту, и когда что-то подобное добавляется, нажатие содержимого вниз, когда вы читаете страницу, может быть очень раздражающим.

Я хочу, чтобы элементы были автоматически добавлены, а не что-то вроде щелчка здесь, чтобы увидеть новые элементы.

Есть ли способ добавить этот контент в верхнюю часть тела без перемещения страницы? Затем, когда пользователь прокручивается до вершины, он уже есть?

Ответ 1

Я делал это в прошлом, добавляя элементы, затем вычисляя их полный внешний свет и устанавливая 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);

Надеюсь, это указывает на то, что вы в правильном направлении.

Ответ 2

Я считаю, что самый универсальный способ сделать это - просто измерить высоту документа до и после его изменения:

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"

Таким образом, вы действительно можете сделать что-либо, не покидая окно, которое вы читаете:)

Ответ 3

Я принял несколько иной подход:

Начните с получения первого элемента тела (или другого элемента, если вы притворяетесь элементом, отличным от тела, который мне нужен), после добавления нового набора элементов используйте смещение (if необходимо прокручивать по отношению к телу) или позицию (если нужно прокрутить по отношению к элементу предка) в исходном первом элементе, чтобы получить обновленные координаты и прокрутить до этой точки.

Что-то вроде:

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 вашего родительского элемента по необходимости (http://api.jquery.com/offsetParent/)

Подробнее см.: http://api.jquery.com/category/offset/