javascript - 页面加载到另一个页面的 ID 时滚动到顶部失败

Question

我的页面有一个 ID (#C2)，用于加载其他 html 页面(产生单个页面的效果)。加载是通过以下 JavaScript 完成的:

function ShowAjax(type) {
    var filename = "text_" + type + ".htm"
    $( "#C2" ).hide().load( filename ).fadeIn(500);

在加载到主页 ID 的页面之一上，我需要“滚动到顶部”。为此，我使用带有单击处理程序的 div，该处理程序调用 javascript jquery 函数 (ScrollTop)。链接如下:

<div class="C1"><button class="button_01" id="first" onclick="ScrollTop();">Scroll to Top</button></div>

这是 javascript/jquery:

<script>
function ScrollTop(){
$("a[href='#bkmkAA']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;}
});</script>

我的问题是，单击后，它什么也不做，并且 Firefox 开发控制台显示:
“ReferenceError:ScrollTop 未定义。”我的页面上到处都是js，而这个javascript肯定是在页面上定义的。

我的问题是这是否与页面加载到主页的ID(不太可能)或其他什么有关。

感谢您的任何想法或建议。

更新:

@Robin Zigmond - 这是最后一段在页面上的外观:

<div class="h1_info" id="bkmk24"><b>Section Header 24</b></div><br><div class="set_01">Sentence 1.&nbsp;&nbsp;Sentence 2.&nbsp;&nbsp;Sentence 3.&nbsp;&nbsp;Sentence 4.<div class="C1"><button class="button_01" id="first" onclick="ScrollTop()";">Scroll to Top()_NEW</button></div></div><br>

<script>
function ScrollTop(){
$("a[href='#bkmkAA']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;}
});</script>

从这里看来，脚本在范围内，因为它紧跟在最后一段末尾的下方。我错过了什么？

Answer 1

您没有正确调用该函数。将您的 HTML 代码更改为以下内容:

<div class="C1"><button class="button_01" id="first" onclick="ScrollTop()">Scroll to Top</button></div>

此外，您不需要在 scrollTop() 函数内绑定(bind)事件。将其替换为以下内容即可完成:

function ScrollTop(){
    $("html, body").stop().animate({ scrollTop: 0 }, "slow");
    return false;
}

纯 JavaScript:

function ScrollTop() {
    document.querySelector('html, body').scrollIntoView({
        behavior: 'smooth',
        block: 'start'
    });
}

如果您想滚动到页面部分，请查看 this blog post .