滚动到顶部按钮在子模板中不起作用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了滚动到顶部按钮在子模板中不起作用相关的知识,希望对你有一定的参考价值。

我在我的Base模板中添加了Scroll Back To Top Button,它运行正常。但是当我去任何其他页面时,该按钮将无法工作。为什么?!

这是我的Base模板:

<!DOCTYPE html>
<html>
  <head></head>

  <body>
    <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
    .
    .
    <div class="container">
      #import("content") 
    </div>
    .
    .
  </body>
</html>

我正在使用上面链接中的javascript

window.onscroll = function() { scrollFunction() };

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    $('#myBtn').fadeIn();
  } else {
    $('#myBtn').fadeOut();
  }
}

function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

该按钮仅在主页上工作,但在任何其他页面上都没有,即使我看到(来自View Page Source)<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>在体内。有人可以帮忙吗?

答案

上面的代码实际上是正确的,按钮现在在每个页面上都能正常工作。在tobygriffin指出之后,我注意到有一个Cannot read property 'style' of undefined错误,我以前没有。修复该错误后,该按钮正在处理所有页面。

虽然这对我来说是一个愚蠢的错误,但我保留了这个Q&A(不删除它),希望有人可能觉得它很有用:)

以上是关于滚动到顶部按钮在子模板中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

自动滚动到顶部在 UITableView 中不起作用

bootstrap shown.bs.modal 不起作用,因此模态框无法滚动到顶部

单击后退按钮时,React-router 滚动到顶部

以编程方式滚动到顶部不起作用?

在渲染时将滚动反应到顶部——通常的答案似乎不起作用

通过点击状态栏滚动到顶部 TableView 不起作用(有许多子视图)SWIFT