Question

我想使用滚动功能在有人滚动时显示隐藏的“回到顶部”按钮。

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

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

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

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

有些人建议我使用scrollTop函数来隐藏“返回顶部”按钮，但是有太多的跨浏览器问题。

基本上有一些代码可以使函数无效吗？

抱歉新手问题，但我是jquery的新手。

Answer 1

以下是一些代码，只要点击它就会隐藏按钮

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/

Answer 2

我觉得你认为vanilla js scrollTop可能有跨浏览器问题，但我认为jQuery应该没问题。如果我错了，请纠正我。

$(window).scroll(function() {
    if ($(window).scrollTop() === 0) {
        $("#top_btn").css("visibility", "visible");
    }
    else {
        $("#top_btn").css("visibility", "hidden");
    }
);

使用click来取消函数？

2 个答案: