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">jquery免费特效下载
<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>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。