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。向下滚动到底部以查看要单击的按钮，然后它将带动文档滚动以将目标元素移到视口的顶部。

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);
  }
)

Ajax加载方法不在div顶部加载

1 个答案: