这篇文章将为大家详细讲解有关jQuery如何实现小火箭返回顶部特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
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);
});整体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 8000px;
}
a {
color: #FFF;
}
.actGotop {
position: fixed;
bottom: 50px;
right: 50px;
width: 150px;
height: 195px;
display: none;
z-index: 100;
}
.actGotop a,
.actGotop a:link {
width: 150px;
height: 195px;
display: inline-block;
background: url(images/gotop.png) no-repeat;
outline: none;
}
.actGotop a:hover {
width: 150px;
height: 195px;
background: url(images/gotop.gif) no-repeat;
outline: none;
}
</style>
</head>
<body>
<!-- 返回顶部小火箭 -->
<div class="actGotop"><a href="javascript:;" rel="external nofollow" title="Top"></a></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//当页面超出1000px的时候，让小火箭显示，如果小于1000px，则隐藏
$(window).scroll(function () {
if ($(window).scrollTop() >= 1000) {
$(".actGotop").stop().fadeIn(500);
} else {
$(".actGotop").stop().fadeOut(500);
}
})
});
//在外面注册
$(".actGotop").click(function () {
$("html,body").stop().animate({ scrollTop: 0 }, 1000);
//scrollTop为0
// $(window).scrollTop(0);
});
</script>
</body>
</html>jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。
关于“jQuery如何实现小火箭返回顶部特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
