摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>滚动到top的位置</title> <link rel="stylesheet" href="st
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动到top的位置</title>
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.css">
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
body{margin:0;padding:0;text-align: center;}
/* 返回顶部 */
a {position: fixed;right:3.5%;bottom:5%;width:50px;height:50px;background-color:rgba(0,0,0,.5);border-radius:3px;}
</style>
<body>
<!-- 头部 -->
<div id="head" style="margin:10px auto;width:1200px;background-color:green;height:50px;">头部</div>
<!-- 内容区 -->
<div style="height:200vh;margin:0 auto;width:1200px;background-color:#999;">
内容
</div>
<!-- 尾部 -->
<div style="background-color:#003300;height:50px;margin:15px auto;width:1200px;"></div>
<!-- 返回顶部 -->
<a href="javaScript:;" style="display:flex;align-items: center;justify-content: center;">
<i class="fa fa-anchor" style="font-size:1.5rem;color:#fff;"></i>
</a>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
if($(window).scrollTop() < 200){
$('a').css('display','none');
}else{
$('a').css('display','flex');
}
});
//绑定锚点按钮
$('a').click(function(){
//判断是否需要返回
if($(window).scrollTop() < 200){
return false;
}
//滚动到顶部
$('html , body').animate({scrollTop:0},150);
});
})
</script>
</body>
</html>
批改老师：灭绝师太批改时间：2019-02-11 09:35:01
老师总结：这个效果后期用的比较多,要好好掌握哦,继续加油
