向上滚动按钮不显示/不工作

Scroll Up button not showing up/not working?

本文关键字：显示 工作 按钮 滚动      更新时间：2023-09-26

我正在开发一个单页网站。到目前为止，我成功地实现了"垂直平滑滚动"功能（用于我的主页、ABOUT、GALLERY…导航链接），它运行得很好。

现在，我想在同一个网站上添加另一个jquery——一个小的"向上滚动"按钮，它应该显示在右下角，以便于导航。问题是它从来没有出现过？？？

以下是我迄今为止所做的：

HTML:

<a class="scrollup" href="#">Scroll</a>

CSS：

.scrollup {
  height: 38px;
  width: 38px;
  opacity: 1.0;
  position:fixed;
  bottom: 35px;
  right: 35px;
  background: url(images/top.png) no-repeat;
}

JQUERY（我打开了scrollup.js文档并在里面添加了这段代码）：

// scroll-to-top button show and hide
jQuery(document).ready(function(){
    jQuery(window).scroll(function(){
        if (jQuery(this).scrollTop() > 100) {
            jQuery('.scrollup').fadeIn();
        } else {
            jQuery('.scrollup').fadeOut();
    }
});
// scroll-to-top animate
jQuery('.scrollup').click(function(){
    jQuery("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});

我还将这些脚本添加到我的HTML头中：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
    <script type='text/javascript' src='scrollup.js'></script>
    <script type='text/javascript' src='verticalsmoothscrolling.js'></script>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>

尽管如此，我的垂直平滑滚动运行良好，但"向上滚动"按钮从未出现？？？这个问题底部的脚本顺序重要吗？或者是别的东西？希望你们能帮我解决这个问题。感谢：）

如果正确加载文件并正确触发滚动事件，则此脚本可以工作（jsFiddle）。这意味着三件事之一：

  1. 脚本加载不正确。您应该在开发人员控制台中看到一个与404错误相关的错误。

  2. 此脚本的资源未正确加载。事实似乎并非如此，因为您在脚本之前正确地包含了jQuery。这通常会导致开发人员控制台中弹出一个错误：referenceError（$ is not defined或jQuery is not defined）或blahblah is not a function，其中blahlah是您调用的函数。

  3. 滚动事件未启动。这种情况可能是这样的，因为你有一个改变滚动"外观"的其他脚本。

    如果此脚本将处理程序附加到wheel事件或DOMMouseScroll事件并阻止默认操作，则永远不会触发滚动事件。这是如何运作的，可以在这个问题中找到。

    要检查是否调用了滚动事件，请在滚动事件上附加一个处理程序，并在控制台中记录一些内容。检查控制台，查看是否有记录：

    $(window).on( 'scroll', function() {
  console.log( 'The scroll event fired!' );
} );

    如果滚动事件没有触发，您可以通过触发wheel（文档）和/或DOMMouseScroll事件（文档）中的滚动事件来"修复"此问题：

    function triggerScroll() {
  $( window ).trigger( 'scroll' );
}
jQuery.on( 'wheel', triggerScroll );
jQuery.on( 'DOMMouseScroll', triggerScroll );
相关文章：