在 ROR 中加载 AJAX 后，如何使页面跳转到顶部？答案

【问题标题】：How would I make the page jump to top after an AJAX load in ROR?在 ROR 中加载 AJAX 后，如何使页面跳转到顶部？
【发布时间】：2015-03-31 10:17:54
【问题描述】：

我明白下面的js应该让浏览器跳转到页面顶部，

$('html').scrollTop(0);

但是我应该把这段代码放在哪里，以便在 ajax 加载后它会被激活？

我有一个 show.js.erb 文件，其中包含用于异步加载的 js，但只是将 js 放在那里是行不通的，我想是因为它会与加载同时发生。

$("#tag_posts").html("<%= escape_javascript(render @atag) %>");

那么，我该怎么做呢？

谢谢！

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="generator" content="Bootply" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <!-- Google Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
    </head>
    <body>
<div class="wrapper">
    <div class="box">
      <div class="column col-sm-12 col-xs-12" id="main">

            <!-- main right col -->
            <div class="column col-sm-9 col-xs-11" id="main">

                <div class="padding">
                    <div class="full col-sm-9">

                        <!-- content -->                      
                        <div class="row">

                         <!-- main col left --> 
                         <div class="col-sm-12">

                              <!-- Render Tag Posts Asynchronously to Populate Stream -->
                              <div id="tag_posts"></div>

                              <!-- Render Posts Partial to Populate Stream -->
                              <%= render "posts/index" %>

【问题讨论】：

你能展示你在哪里构建你的 Ajax 请求对象的代码吗？
为简洁起见添加、截断/编辑
我想看看您的 JAVASCRIPT 正在构建 AJAX 对象。或者，如果您使用的是 jQuery，我希望看到 $.ajax() 语句。
那行js就是它。其余的是红宝石。

标签： javascript jquery ruby-on-rails ajax ruby-on-rails-4

【解决方案1】：

确定您需要为每个 Ajax 调用执行此操作，但如果您需要，您可以使用 ajaxComplete。每次 Ajax 调用完成时都会触发它。

$( document ).ajaxComplete(function() {
    $('html').scrollTop(0);
});

如果不想每次调用都触发，可以给函数加个条件：

$( document ).ajaxComplete(function( event, xhr, settings ) {
    if ( settings.url === "<%= escape_javascript(render @atag) %>" ) {
        $('html').scrollTop(0);
    }
});

如果您需要更多有用的示例，请查看链接。

【讨论】：

我认为简单的 'html' 选择器可能不起作用，因为我试图到达顶部的页面只有一部分滚动。你知道滚动到特定 div 顶部的语法吗？谢谢！
如果您需要滚动到特定元素的顶部，只需使用其 id。对于
- 你可以使用：$("#myDiv").scrollTop(0)

【解决方案2】：

如果您想为文档中的所有 AJAX 调用执行它，您需要这样的东西：

$(document).on("ajax:success", "form[data-remote]", function(e, data, status, xhr) {
  $('html').scrollTop(0);
});

在上面的示例中，当具有名为 data-remote 的数据属性的表单元素发送 AJAX 调用并且调用成功时，函数将被执行。阅读更多关于onhere的信息。

来自jQuery Documentation 的另一个例子，但这次是ajaxSuccess：

$(document).ajaxSuccess(function() {
  $( ".log" ).text( "Triggered ajaxSuccess handler." );
});

文档中的另一个示例，但这次将回调直接附加到 ajax 函数：

var jqxhr = $.ajax( "example.php" )
.done(function() {
  alert( "success" );
})
.fail(function() {
  alert( "error" );
})
.always(function() {
  alert( "complete" );
});

【讨论】：

没有表格怎么办？ IE。它是从数据库加载的
@Laser 查看文档。选择器（在这种情况下为form[data-remote]）是可选的！这意味着你可以离开它！
@Laser 顺便说一句。从数据库加载 AJAX 是什么意思？
我认为问题可能是 jquery 在 jquery 函数中不起作用。为了测试 js 工作， $(document).ajaxSuccess(function() { $( ".log" ).text( "Triggered ajaxSuccess handler." ); });不会将任何内容记录到控制台，而是 jquery $(document).ajaxSuccess(function() { console.log( "Triggered ajaxSuccess handler." ); }); 中的标准 js。工作正常。有什么想法吗？
为什么像$(".log") 这样的东西应该起作用？为什么不只是console.log？

【解决方案3】：

我遇到了同样的问题。我完全尝试了上面提到的所有方法。没有人解决它。问题是我在返回 ajax 响应的文件中包含了一些标签。我从那里删除了样式，现在它没有跳转。

【讨论】：