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

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

1 个答案: