Question

我正在为我的个人网页创建一个“滚动到顶部”的链接，但我遇到了一些我似乎无法纠正的奇怪行为。

我希望当用户滚动到一定数量的像素时链接会淡入，然后如果用户向上滚动此点，则会再次淡出。很标准的行为。

标记非常简单：

<a href="#home" id="scroll-top" class="scroll"></a>

CSS：

#scroll-top {
    position: fixed;
    right:30px;
    bottom:30px;
    width: 30px;
    height:30px;
    color: #38555e;
    z-index: 99;
    border-radius: 50%;
    border:2px solid #38555e;
    text-align: center;
    background:#fff;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
    display:none;
}

#scroll-top:hover {
    background:#38555e;
    color:#fff;
    border-color:#fff;
}

和Jquery代码：

$(window).scroll(function () {
        if(!( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )) {
            if ($(this).scrollTop() > 100) {
                $('#scroll-top').fadeIn(2000);
            } else {
                $('#scroll-top').fadeOut(2000);
            }
        }
    });

DEMO：http://jsfiddle.net/chc91n5f/4/

我的问题是，当链接淡入时，它等待大约2秒然后快速淡入而不是立即开始淡入淡出并慢慢消失。此外，当链接淡出时，它会等待，然后快速淡出。

我在这里缺少什么？

Answer 1

jQuery中的fadeIn和fadeOut函数是动画不透明度的缩写。

jQuery动画将属性设置为内联并更改它，直到它到达特定点。在你的情况下，它将不透明度改为0.35677，并且浏览器会动画这个更改。

为了拥有更流畅的动画，请使用CSS类（例如可见）来修改不透明度。

body {
    height:2000px;
    background:red;
}
#scroll-top {
    position: fixed;
    right:30px;
    bottom:30px;
    width: 30px;
    height:30px;
    color: #38555e;
    z-index: 99;
    border-radius: 50%;
    border:2px solid #38555e;
    text-align: center;
    background:#fff;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
    opacity: 0;
}

#scroll-top:hover {
    background:#38555e;
    color:#fff;
    border-color:#fff;
}
#scroll-top.visible {
    opacity: 1;
}

并使用以下代码进行更改：

if ($(this).scrollTop() > 100) {
    $('#scroll-top').addClass('visible');
} else {
    $('#scroll-top').removeClass('visible');
}

Answer 2

我相信问题出在你的滚动功能中..

最简单的解释。

当你滚动（用滚轮勾选1个）时，代码会显示你是否超过了100px。在大多数基本浏览器和操作系统中，滚动距离是122px（如果我错了，请纠正我）。问题是..如果用鼠标滚动滚动3次。你是100px的3倍，fadeIn的动画会排队3次。在某个时刻jQuery有足够的它，并说你知道什么..如果你想要相同的长动画几次。我会跳过几次来解决我的工作量。

这么简单的解释。

您可以使用clearQueue（http://api.jquery.com/clearqueue/）禁用此功能，它将禁用闪烁动画。像这样编辑

 $(window).scroll(function () {
    if(!( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )) {
        if ($(this).scrollTop() > 100) {
            $('#scroll-top').animate({opacity: 1},1000).clearQueue();
            console.log("test");
        } else {
            $('#scroll-top').animate({opacity: 0},1000);
        }
    }
});

演示：http://jsfiddle.net/2uox7ep7/5/

Answer 3

因为即使它已经褪色并因此延迟，它也会在你滚动时继续淡入/淡出。您可以使用visible之类的变量来跟踪可见性 http://jsfiddle.net/chc91n5f/7/

链接衰落的奇怪行为

3 个答案: