Question

Rails noob，甚至更可悲的Javascriptübernob在这里。我在static.js文件中有以下代码，该文件正常直到我点击我的购物车显示页面，然后返回主页。

$(function() {
  $('a').click(function() {
    $('html, body').animate({
      scrollTop: $(this.hash).position().top
    }, 1200);
    return false;
  });
});

当我在购物车视图之后返回主页时，导航不再平滑滚动到锚点，只是跳到它们，好像那里没有js。如何永久保持这个平滑的卷轴是我的问题。感谢。

Answer 1

<强> Turbolinks

问题几乎可以肯定是Turbolinks - 第三方JS，它基本上只会通过点击启用了turbolinks的链接来提取您访问过的网页的<body>标记。

Turbolinks的问题是，因为它使页面的<head>部分保持不变，它实际上阻止了JS绑定到它附加到DOM的新元素，从而导致你面临的问题

解决这个问题的方法要么是delegate javascript，要么是Turbolinks events回调。我倾向于尽我所能：

-

<强>团

委派是指将javascript事件绑定到DOM的“稳定”元素，将事件调用委托到您希望的元素。

当DOM中的元素不断变化时（如使用Turbolinks），可以使用此方法，并且需要“动态”绑定元素。这通常是通过Ajax请求完成的，因为DOM将根据来自服务器的新数据而改变：

#app/assets/javascripts/application.js
$(document).on("click", ".your_element", function(){
   // will delegate from "document" (which is always present), to .your_element
});

-

Turbolinks活动

由于$(document).ready在Turbolinks下不起作用（它使用自己的函数覆盖它），因此您必须使用其中一个Turbolinks事件（通常为page:load）：

#app/assets/javascripts/application.js
var your_function = function(){
  // do something here
}
$(document).on("page:load ready", your_function);

<强>修正

试试这个：

#app/assets/javascripts/application.js
$(document).on("click", "a", function() {
  $('html, body').animate({
    scrollTop: $(this.hash).position().top
  }, 1200);
  return false;
});

在页外点击Rails后Javascript停止

1 个答案: