Question

我想在滚动150px之后显示'go to top'div，但我真的不知道如何...我尝试了很多脚本，没有任何作用。这是我的HTML：

<div id="goto_top" onClick="gotoId('top')" title="Иди на врх"></div>

JS：

$(document).scroll(function () {
   var h = $(this).scrollTop();
   if (h > 150) {
       $('#goto_top').fadeIn();
   } else {
       $('#goto_top').fadeOut();
   }
});

CSS：

#goto_top{
     position: fixed;
     background:url(../images/goto_top.png) transparent no-repeat;
     background-position: top center;
     padding:5px;
     width:35px;
     height:25px;
     bottom:40px;
     right:50px;
     cursor: pointer;
}

#goto_top:hover, #goto_top:active{
     background-position: bottom center;
}

有什么问题？

Answer 1

尝试将$（文档）更改为$（窗口）。此外，你应该看一下函数debouncing，这对于这样的情况很有用，你需要检查一些滚动位置，但是你不想必须不断地做到这一点，因为它会在浏览器上产生大量的开销。。你可以将这个函数去抖100ms，这对用户来说似乎是相当即时的，同时减少了这个过程中的大量浏览器开销。

http://underscorejs.org/#debounce

Answer 2

我在这里创建了一个示例：jsfiddle.net/6eF9g/1/

$(window).scroll(function () {
    if ($(window).scrollTop() >= 150) {
        $(".gotoTop").fadeIn();  
    } else {
        $(".gotoTop").fadeOut(); 
    }
});

$(".gotoTop").hide();

$(".gotoTop").click(function () {
    $("body,html").animate({
        scrollTop: 0
    }, 600);
    return false;
});

滚动后显示div不起作用

2 个答案: