如何动画css'；顶部'；在jQuery中的某个滚动位置或某个元素可见时？

我有一个scrolltotop图标，当窗口向下滚动一点时就会出现。问题是当窗口滚动到页面底部时，它与我不想要的div重叠

我想让scrolltotop的顶部位置向上移动一点，以避免当窗口一直滚动到底部时与div发生冲突

以下是我目前掌握的情况：

jQuery：

    //Scroll to top animate in
$(window).scroll(function(){
    if ($(this).scrollTop() < 300) {
        $('.scrollToTop').fadeOut(1000).css({right:-70});

    } else {
        $('.scrollToTop').fadeIn(1000).css({right:20});
    }
});

//Click event to scroll to top
$('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},1000);
    return false;
});

//滚动至中的顶部动画
$（窗口）。滚动（函数（）{
if（$（this）.scrollTop（）<300）{
$（'.scrollToTop'）.fadeOut（1000）.css（{right:-70}）；
}否则{
$（'.scrollToTop'）.fadeIn（1000）.css（{right:20}）；
}
});
//单击事件以滚动到顶部
$（'.scrollToTop'）。单击（函数（）{
$（'html，body'）.animate（{scrollTop:0}，1000）；
返回false；
});

试试看

//滚动至中的顶部动画
$（窗口）。滚动（函数（）{
if（$（this）.scrollTop（）<300）{
$（'.scrollToTop'）。停止（真，真）。淡出（1000）
.css（{右：-70，底部：“20px”}）；
}否则{
$（'.scrollToTop'）.fadeIn（1000）
.css（{右：20，下：“40px”}）；
}
});
//单击事件以滚动到顶部
$（'.scrollToTop'）。单击（函数（）{
$（'html，body'）.animate（{scrollTop:0}，1000）；
返回false；
});

---

jsFIDLE

您需要在窗口上的滚动事件中添加一个额外的条件：

if(($(this).scrollTop() + $(this).height()) > $('.projnav').position().top){
    $('.scrollToTop').css(bottom, 40);
}
else{
    $('.scrollToTop').css(bottom, 20);
}

要使动画平滑，只需添加：

.scrollToTop{
    transition: all .5s;
}

---

小提琴工作：

上下滚动时出现问题，因为1.5大于0.75，在某个点上，

$（'.scrollToTop'）

将出现在窗口上；）到达底部后，如果你再次向上滚动，它会变得混乱up@guest271314：但在这种情况下，您不需要jQuery来执行此操作，您可以更改

底部：40px

在

.scrollToTop

中冷却此功能，是否有方法使其动画化到该位置而不是跳跃？

.scrollToTop{
    transition: all .5s;
}