jquery - 滚动到顶部按钮不显示

Question

我的滚动到顶部按钮在我的其他页面上不起作用，但它在这个页面上起作用我不明白为什么。这是不起作用的 fiddle :https://jsfiddle.net/wzv5d3ab/这是一个:https://jsfiddle.net/0s6721w4/它没有显示在 fiddle 上，但它在我的服务器上，它可能是一个依赖项

我试着把图片放在同一个地方。

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('#scroll').fadeIn();
    } else {
      $('#scroll').fadeOut();
    }
  });
  $('#scroll').click(function() {
    $("html, body").animate({
      scrollTop: 0
    }, 600);
    return false;
  });
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="img/icons/cloud.png" href="#" id="scroll" stye="display: none;"></img>

Answer 1

内联示例和 fiddle 有不同的问题。我将分别解决它们。

首先，在您的内联示例中，您的 JavaScript 代码中有一个额外的 }，它会在控制台中抛出 Uncaught SyntaxError: Unexpected token 错误并阻止您的代码无法运行。

还添加了一个大的 div 以便可以测试滚动，并固定了 #scroll div 的位置。

工作示例:

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('#scroll').fadeIn();
    } else {
      $('#scroll').fadeOut();
    }
  });
  $('#scroll').click(function() {
    $("html, body").animate({
      scrollTop: 0
    }, 600);
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='scroll' style='display:none; position:fixed; bottom:0;right:0; border:1px solid black;'>scroll to top</div>
<div style='height:500em; background:lightblue;'>asdf</div>

关于您的 fiddle ，这是我必须更改才能使其正常工作的内容:

• 您使用的是 jQuery，但没有包含 jQuery。所以在控制台中出现错误:Uncaught ReferenceError: $ is not defined。
• 取消html中img#scroll标签的注释
• 从 #scroll 的 css 中移除 display:none(jQuery 可以处理内联样式，但不能处理这个
• 取消注释 #scroll 中的 background-color 以便可以看到 img(因为 src 未加载)。

还有一些其他的修复:

• 将 z-index:999 添加到 #scroll 以便它位于图像和内容之上
• 将 $(document).ready() 移到 for 循环之外。

在那之后我也能够让 fiddle 工作了:https://jsfiddle.net/1dgq9skf/