javascript - 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>

问题是，当我使用上面显示的 AJAX 脚本将新页面加载到 div 中时，如果我在加载新页面之前在其他页面上向下滚动，则新页面并不总是在顶部加载。

我希望新内容加载到 div 顶部，而不是页面下方的某个位置。

到目前为止我已经尝试了两件事。第一个是在加载后立即调用scrollTop:

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

第二个是每个页面顶部的脚本，用于在文档准备就绪时触发:

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

console.log 显示在开发控制台中，但它不会滚动到顶部或从顶部开始。

如何使用 Ajax 加载方法加载页面，并始终显示在 div 的顶部，显示文本的第一行，而不是从文本下方的某个位置开始(例如，从第 3 段开始) ？或者，我怎样才能在页面加载后强制它滚动到顶部？

Answer 1

首先，您似乎正在使用 scrollTop错误的。不带参数的 Scrolltop 会告诉您滚动条在元素上的位置(如果有)。 Scrolltop 带有高度参数来设置滚动条。因此 $("#C2").scrollTop() 可能会返回 0，因为该元素可能没有滚动条。由于您从不使用该值，因此它不会执行任何操作。您可能还想更改整个文档的滚动条。实际上你需要这样的东西:

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

Here is an example in jsbin 。向下滚动到底部可以看到要单击的按钮，然后它会带动文档滚动，将目标元素带到视口(viewport)的顶部。

• offset 返回具有 top 和 left 属性的对象。给出元素相对于文档的位置。 .position 给出相对于父级的位置。使用该顶部数字，您可以在scrollTop 中使用该数字来更改文档的位置。
  • scrollTop 然后获取该数字(元素的顶部位置)并将文档(或其他元素)滚动到该位置。

在我看来，您似乎正在尝试使页面顶部的元素接收内容，无论单击哪个 div？

如果是这种情况，则直接选择该元素

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

或者使用实际的 ajax methods 之一该加载是快捷方式，并在成功回调中定位该元素

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