摘要：html代码<a href="#top"></a> <div></div> <p id="back"><a href="" id="top"><i class="fa fa
html代码
<a href="#top"></a> <div></div> <p id="back"><a href="" id="top"><i class="fa fa-arrow-circle-up"></i><br>返回顶部</a></p>
css代码
<style type="text/css">
div{width: 1200px;height:1500px;margin:0 auto;background: #ccc;}
p{width:60px;height: 52px;background: #999;position: fixed;bottom:10px;right:10px;text-align:center;padding-top:8px;display: none;}
p:hover{background: #bbb;}
a{text-decoration: none;color:#fff;font-size:12px;}
</style>js代码
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>100){
$('#back').fadeIn(300);
}else{
$('#back').fadeOut(300);
}
});
})
</script>效果图
批改老师：韦小宝批改时间：2018-12-11 09:14:23
老师总结：回到顶部的这种效果基本上各大网站或者网页都是随处可见的！实现起来也很简单！但是课后还是得练习哦！
