Demo：点我查看效果
以下是代码：
HTML中写入1
2
3
4
5
6
7
8
9
10<div class="top">
<span title="返回顶部" id="topArrow"></span>
</div>
<link rel="stylesheet" type="text/css" href="../assets/css/style.css"/>
<!--引入jQ-->
<script type="text/javascript" src="../assets/Scripts/jquery.min.js"></script>
<!--引入function.js-->
<script type="text/javascript" src="../assets/Scripts/function.js"></script>
样式表写入:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24/*返回首页button*/
.top{
width: 50px;
height: 100px;
/*background-color: rgba(0,0,255,0.5);*/
border-radius: 10px;
position: fixed;
right: 100px;
bottom: 15%;
}
.top #topArrow:hover{
border-bottom:30px solid #7b2626; /* 定义底部颜色 */
}
.top #topArrow {
width:30px;
height:0px;
border-left:15px solid transparent; /* 右透明 */
border-right:15px solid transparent; /*右透明 */
border-bottom:30px solid #fdd3d7; /* 定义底部颜色 */
font-size:0px;
line-height:0px;
}
function.js:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26/************************************************
*
*返回首页botton出现时间控制
*
*注意：依托于jquery，需要提前引入jQ
*
*************************************************/
$(document).ready(function(){
$("#topArrow").hide()//隐藏go to top按钮
$(function(){
$(window).scroll(function(){
if($(this).scrollTop()>1){//当window的scrolltop距离大于1时，go to top按钮淡出，反之淡入
$("#topArrow").fadeIn();
} else {
$("#topArrow").fadeOut();
}
});
});
// 给go to top按钮一个点击事件
$("#topArrow").click(function(){
$("html,body").animate({scrollTop:0},800);//点击go to top按钮时，以800的速度回到顶部，这里的800可以根据你的需求修改
return false;
});
});