时间戳

首页 > 解决方案 > 滚动到顶部按钮未显示

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

问题描述

我的滚动到顶部按钮在我的其他页面上不起作用，但它在这个页面上起作用，我不知道为什么。这是不起作用的小提琴：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>

标签： jqueryhtmlcss

解决方案

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

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

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

工作示例：

$(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 标签
  • remove display:nonefrom css for #scroll(jQuery 可以处理内联样式，但是不能处理这个
  • 取消注释背景颜色，#scroll以便可以看到 img（因为 src 未加载）。

还有其他一些修复：

  • 添加z-index:999到#scroll，使其位于图像和内容之上
  • 移出循环$(document).ready()。for

之后，我也能够让小提琴工作：https ://jsfiddle.net/1dgq9skf/

推荐阅读