Question

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

我试图将图像放在同一位置。

$(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

内联示例和小提琴存在不同的问题。我将分别解决。

首先，在内联示例中，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>

关于您的小提琴，这是我必须进行更改才能使其正常工作的地方：

您使用的是jQuery，但没有包括jQuery。因此，在控制台中出现了错误：Uncaught ReferenceError: $ is not defined。
取消注释html中的img #scroll标签
从display:none的css中删除#scroll（jQuery可以处理内联样式，但是不能解决这个问题
取消#scroll中的background-color注释，以便可以看到img（因为src未加载）。

以及其他一些修复：

将z-index:999添加到#scroll中，以便它位于图像和其他内容的顶部
将$(document).ready()移动到for循环之外。

之后，我也可以使小提琴起作用：https://jsfiddle.net/1dgq9skf/

Answer 2

可能是因为for i in range(1, len(c), 2): pass吗？考虑将其替换为：-

display: none

滚动到未显示的顶部按钮

2 个答案: