Метод загрузки Ajax не загружается в верхней части div

Question

У моего сайта есть div, где контент загружается с помощью метода загрузки Ajax.При щелчке любой из нескольких ссылок на домашней странице другой div на этой странице загружается с содержимым из выбранного URL.Вот div:

<div class="main_text">
<div id="C2"><span style="color:black">MTX</span></div>
</div>

Вот скрипт:

<script>
function ShowAjax(type) {
    var filename = "text_" + type + ".htm"
    $( "#C2" ).hide().load( filename ).fadeIn(500);
}
</script>

Проблема в том, что когда я загружаю новую страницу в div с помощью скрипта AJAX, показанного выше, новая страница не 't всегда загружается сверху, если я прокрутил вниз на другую страницу перед загрузкой новой страницы.

Я бы хотел, чтобы новый контент загружался вверху div, а не где-то внизу страницы.

Я пробовал две вещи до сих пор.Первый вызывает scrollTop сразу после загрузки:

    $(" #C2 ").scrollTop();

Второй - это скрипт в верхней части каждой страницы для запуска готового документа:

<script>
$(document).ready(function(){
    $(this).scrollTop(0);
    window.scroll(0,0);
    console.log("ready to scroll top");
});
</script>

Консоль.Журнал отображается в консоли разработчика, но он не прокручивается вверх и не начинается сверху.

Как я могу заставить страницы загружаться с помощью метода загрузки Ajax и всегда отображаться в верхней части div, с отображением первой строки текста вместо начала где-то вниз по тексту (например, начиная спункт 3)Или в качестве альтернативы, как я могу заставить его прокрутить вверх после загрузки страницы?

Answer 1

Во-первых, вы, кажется, используете scrollTop неправильно. Scrolltop без аргументов говорит вам, ГДЕ полоса прокрутки находится на элементе, если он есть. Scrolltop с аргументом высоты устанавливает полосу прокрутки. Поэтому $ ("# C2"). ScrollTop (), вероятно, вернет 0, так как элемент, вероятно, не имеет полосы прокрутки. И поскольку вы никогда не используете значение, оно ничего не сделает. Вы также, вероятно, хотите изменить полосу прокрутки всего документа. На самом деле вам нужно что-то вроде этого:

$(document).scrollTop( $(target).offset().top );

Вот пример в jsbin . Прокрутите вниз до нижней части, чтобы увидеть кнопки, по которым нужно щелкнуть, и затем он переместит прокрутку документа, чтобы переместить целевой элемент в верхнюю часть области просмотра.

• смещение возвращает объект с верхним и левым свойствами. Задание позиции элемента относительно документа. .position дает позицию относительно родителя. Используя этот верхний номер, вы можете использовать его в scrollTop для изменения положения документа.
  • scrollTop затем берет это число (верхняя позиция элемента) и прокручивает документ (или другой элемент) в эту позицию.

Мне также кажется, что вы пытаетесь заставить элемент в верхней части страницы получать контент, независимо от того, какой элемент div был нажат?

Если это так, то либо непосредственно выберите этот элемент

$('#topElement').hide().load( filename ).fadeIn(500);

Или используйте один из реальных ajax-методов , для которого загружается ярлык, и укажите целевой элемент в обратном вызове успеха

$.ajax({
  url: filename,
  success: function( response ){
    $("#topElement").hide().html(response).fadeIn(500);
  }
)