点击返回顶部效果实现代码详解
分类：实例代码
本章节详细分享一段代码实例，它实现了点击按钮可以平滑返回网页顶部的效果。
这样的效果在实际应用中非常的广泛，可能实现的策略有不少，下面就分享一个比较简单的一种。
代码实例如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
*{
margin:0px;
padding:0px;
}
body {
height:1500px;
}
#top{
width:50px;
height:50px;
background:green;
position:fixed;
right:10px;
bottom:50px;
display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$("#top").css("display", "block");
}else {
$("#top").css("display", "none");
}
})
$("#top").click(function () {
$("body,html").animate({
scrollTop: 0
}, 500);
})
})
</script>
</head>
<body>
<div id="top"></div>
</body>
</html>
上面的代码实现了我们需要的功能，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(document).ready(function () {}，当文档内容完全加载完毕再去执行函数汇中的代码。
（2）.$(window).scroll(function () {})，注册scroll事件处理函数，也就是滚动窗口滚动条时会触发此事件。
（3）.if ($(this).scrollTop() > 200) {
$("#top").css("display", "block");
}else {
$("#top").css("display", "none");
}，当向下滚动超过200px，那么就显示返回顶部按钮，否则隐藏。
（4）.$("#top").click(function () {
$("body,html").animate({
scrollTop: 0
}, 500);
})，点击按钮可以返回顶部。
二.相关阅读:
（1）.scroll事件可以参阅jQuery scroll事件一章节。
（2）.scrollTop()可以参阅jQuery scrollTop()一章节。
（3）.css()可以参阅jQuery css()一章节。
（4）.animate()可以参阅jQuery animate()一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu