gpt4 book ai didi

javascript - 在像素高度滚动时淡出

转载 作者:太空宇宙 更新时间:2023-11-03 18:01:20 25 4
gpt4 key购买 nike

我正在尝试实现一个“滚动到顶部”按钮,该按钮在页面上的某个点淡入并在某个点淡出...我的 fadeIn 功能正常工作但似乎无法获得正确的效果单击事件淡出的语法;一旦你到达顶部它就会消失,而不是如果你 <= 675px 就消失。非常感谢任何帮助!

HTML:

</div>
<a href="#top" class="scrollToTop">BACK TO LOGIN</a>
</div>

jQuery:

$(document).ready(function() {

//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}

});

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

});

最佳答案

我认为您的问题不是很清楚,但也许您的意思是当单击 scrollToTop 按钮时它不会消失,直到滚动到达页面顶部,这是因为当您的动画功能正在运行 .滚动 不能运行得如此之快以至于当达到 675px 时按钮会消失,但是您可以使用以下代码在单击它后立即淡出按钮:

jQuery: $(document).ready(function() {
var isClicked = false;
$('.scrollToTop').css("display","none");
$(window).scroll(function() {
if (isClicked == false){
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
}
});

$('.scrollToTop').click(function() {
isClicked = true;
$('.scrollToTop').fadeOut(500);
$('html, body').animate({
scrollTop : 0
}, 800, function(){
isClicked = false;
});
});
});

添加了 isClicked 变量以防止按钮闪烁(您可以删除它以弄清楚我在说什么)。我还添加了这一行:

$('.scrollToTop').css("display","none");

因为当页面第一次加载并且您位于页面顶部时,您似乎不需要“滚动到顶部”按钮。

Check JSFiddle Demo

关于javascript - 在像素高度滚动时淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25431620/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com