首先，咱们要用到的是HTML、css设置样式、以及juqery插件
下面就让我们一起来看一看
1、HTML部分
<head>//咱们首先要先引入jq插件，在头部引用，这样页面一开始就可以加载到
<script type="text/javascript" src="./所有的juqery版本/jquery2.1.1/jquery-2.1.1.js"></script>
</head>
<a name="锚点"></a>//顶部的锚点作为跳转
<div class="zzx_Return">
<a href="#锚点" class="zzx_Return2"><img src="./fh_top01.jpg"></a>//用图片点击实现返回顶部
</div><!-- 返回顶部按钮-->
```
2、css部分
```css
.zzx_Return{/* 锚点部分 */设置锚点盒子的大小
width: 50px;
height: 50px;
position: fixed;
top: 800px;
left: 1600px;
}
.zzx_Return a img{//设置锚点点击图片的大小
width: 50px;
height: 50px;
}
3、juQery部分，咱们要用到的五个小方法
ready()方法，scroll()方法、scrollTop()方法、fadeOut()方法 、以及fadeIn()方法
<script type="text/javascript">
//jq部分
$(document).ready(function(){//页面加载完成执行
$(".zzx_Return2").fadeOut();//加载完成首先让返回顶部按钮消失
$(window).scroll(function(){//获取页面现在所在的位置
if($(window).scrollTop()>500){//当页面高度大于500时
$(".zzx_Return2").fadeIn();//返回顶部按钮显示
}else{
$(".zzx_Return2").fadeOut();//否则返回顶部按钮不显示显示
}
});
});
</script>
好了，以上就是我今天分享的一点点小方法，有建议可以和我提哦，咱们一起学习！
加油！前端攻城狮！！！
版权声明：本文为weixin_45971638原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。