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

时间:2013-08-25 14:22:38

标签: javascript jquery

我正在开发一个单页网站。到目前为止,我成功实现了“垂直平滑滚动”功能(对于我的HOME,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'>

仍然,我的垂直平滑滚动工作正常,但'scrollup'按钮永远不会显示???这个问题底部的脚本顺序是否重要?还是别的什么?希望你们能帮助我解决这个问题。谢谢你:)

1 个答案:

答案 0 :(得分:1)

如果文件已正确加载并且正确触发了滚动事件,则此脚本可以正常工作(jsFiddle)。这意味着三件事之一:

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

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

  3. 不会触发滚动事件。可能就是这种情况,因为你有另一个脚本可以改变滚动的“外观”。

    如果此脚本将处理程序附加到wheel事件或DOMMouseScroll事件并阻止默认操作,则永远不会触发scroll事件。这是如何工作的can be found in this question

    要检查是否调用了scroll事件,请将处理程序附加到scroll事件并在控制台中记录某些内容。检查控制台以查看是否记录了某些内容:

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

    如果滚动事件未触发,您可以通过在wheeldocs)和/或DOMMouseScroll事件中触发滚动事件来“修复”此事件({{3 }}):

    function triggerScroll() {
      $( window ).trigger( 'scroll' );
    }
    
    jQuery.on( 'wheel', triggerScroll );
    jQuery.on( 'DOMMouseScroll', triggerScroll );