您的位置：首页 > Web前端 > JavaScript

js实例-回到顶部

2018-03-22 15:20 176 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
.divH {
height: 2000px;
}
.divT {
width: 50px;
height: 65px;
font-size: 23px;
background-color: #35ce96;
color: white;
position: fixed;
right: 18px;
bottom: 30px;
}
.divT:hover{
cursor: pointer;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="divH"></div>
<div class="divT hide" id="r
8e67
ttop"><strong>返回顶部</strong></div>

<script src="../jspritic/js/jquery.js"></script>
<script>

window.onscroll=function () {
var onsc=$(window).scrollTop();//添加滚动条
if(onsc>200){
$(".divT").removeClass("hide");
}else {
$(".divT").addClass("hide");
}

function Returntop() {
$(window).scrollTop(0);
}

$("#rttop").click(function () {
Returntop();
});
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航