1

我想使用滚动功能使隐藏的“返回顶部”按钮在有人滚动时出现。

$(window).scroll(function(){$("#top_btn").css("visibility", "visible");});

我也有自动滚动页面到命名锚点的按钮。“返回顶部”按钮就是其中之一。它将页面滚动回顶部。当它被点击时，我也会让它消失，因为一旦你在页面顶部就不再需要它了。

问题是，滚动功能使“返回顶部”按钮出现，即使它正在滚动到顶部。如果单击它，我想让它消失，并保持隐藏状态。

我想我的问题是如何在单击返回顶部按钮时取消原始滚动功能？

有人建议我使用 scrollTop 功能来隐藏“返回顶部”按钮，但这样的跨浏览器问题太多了。

基本上有一些代码可以使该功能无效吗？

对不起新手问题，但我是 jquery 的新手。

4

2 回答 2

3

这是一些代码，一旦单击它就会隐藏按钮

var isScrollingToTop = false;
$(window).scroll(function(){
    if(!isScrollingToTop && $(window).scrollTop()>0)
         $('#scrollBtn').show();
    else
         $('#scrollBtn').hide();
});
$('#scrollBtn').click(function(){
    isScrollingToTop = true;
    $('body,html').animate({scrollTop: 0}, 800,function(){
        isScrollingToTop=false;
    });
});

这是一个 jsfiddle 例如：http: //jsfiddle.net/btesser/HXQX4/1/

于 2012-10-11T17:09:28.460 回答
1

我觉得您认为香草 jsscrollTop可能存在跨浏览器问题，但我认为 jQuery 应该没问题。如我错了请纠正我。

$(window).scroll(function() {
    if ($(window).scrollTop() === 0) {
        $("#top_btn").css("visibility", "visible");
    }
    else {
        $("#top_btn").css("visibility", "hidden");
    }
);
于 2012-10-11T17:12:48.803 回答