微客导航 » 文章资讯 » jQuery实现小火箭返回顶部特效

jQuery实现小火箭返回顶部特效

2023-08-02 11:15:04 302

jquery实现小火箭返回顶部案例，供大家参考，具体内容如下

1.滚动页面，当页面距离顶部超出1000px，显示小火箭。

封装在scroll函数里，当前页面距离顶部为$(window).scrollTop>=1000

小火箭显示和隐藏用fadeIn和fadeOut

//当页面超出1000px的时候，让小火箭显示，如果小于1000px，则隐藏
$(window).scroll(function(){
if($(window).scrollTop()>=1000){
$(".actGotop").stop().fadeIn(1000);
}else{
$(".actGotop").stop().fadeOut(1000);
}
})
});

2.当小火箭出现后，点击小火箭，返回到页面顶部。

在外面出册点击事件，获取页面，html或者body,返回用animate动画函数，到顶部即scrollTop为0，时间可以设置

$(".actGotop").click(function(){
$("html,body").stop().animate({scrollTop:0},1000);
});

3.如果要让小火箭点击后，直接回到顶部，可以只设置$(window).scrollTop(0)，既可

$(".actGotop").click(function(){
//$("html,body").stop().animate({scrollTop:0},1000);
//scrollTop为0
$(window).scrollTop(0);
});

整体代码如下：






Title

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery实现小火箭返回顶部特效

热门推荐

随机推荐