使用jQuery和CSS向下滚动窗口时取消隐藏div

Question

当我在我的网站上向下滚动时,我正试图显示一个小的"返回顶部"div.这是我的div的代码(在开发过程中,样式是内联的,直到我完成并稍后将其全部移动到base.css文件中).

    <div id="backToTop" style="position:fixed; right:10px; top: 200px; width: 50px; height:50px; color:#ffffff; background-color:#000000; visibility:hidden"><a href="#top">Back to Top</a></div> 

你可以看到相当简单.然后我尝试使用jQuery来检测窗口稍微向下滚动然后显示div:

    $(window).scroll(function(){
       if($document).scrollTop() > 0){
          $('#backToTop').show();
       }else{
          $('#backToTop').hide();
       }
    }); 

我的问题是脚本似乎没有被触发.当我向下滚动页面时,div不会出现.

我在页面上有额外的jQUery用于表单验证,所以我尝试将其与此函数一起包含在:

    $().ready(function(){ /* Code goes here */ }

我也尝试过将它包括在内,但我没有喜悦.我在页面的剩余部分使用Twitter引导程序.

如果有人能够指出我为什么这个完全有效的代码不起作用的方向,那将是伟大的.

干杯,

Ĵ

Answer 1

您的代码中有拼写错误:

if($document).scrollTop() > 0){

有一个缺失(:

if( $(document).scrollTop() > 0 ) {
     ^

这是一个有效的例子:http://jsfiddle.net/U7scm/

编辑

我也注意到你正在设置visibility: hidden.jQuery .show()和.hide()函数将切换display属性,因此使用display: none而不是visibility: hidden