JQuery实现点击回到顶部
程序员文章站
2022-03-15 13:25:55
本人制作简易版，主要是看JQuery里的逻辑，希望可以帮到有需要的人样式代码 Document ...
本人制作简易版，主要是看JQuery里的逻辑，希望可以帮到有需要的人
样式代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--切记导入jquery文件-->
<script src="../jquery.min.js"></script>
<style>
div {
width: 800px;
height: 800px;
background-color: thistle;
margin: 800px auto;
}
span {
position: fixed;
right: 0;
bottom: 50px;
background-color: tomato;
display: none;
}
</style>
</head>
<body>
<div>
</div>
<span>返回顶部</span>
</body>
</html>
逻辑代码
<script>
$(function () {
//div距离文档顶部的距离
var ot = $('div').offset().top
//页面卷去的高度
$(window).scroll(function () {
var st = $(document).scrollTop()
if (st >= ot) {
$('span').show();
} else {
$('span').hide();
}
})
//返回顶部
$('span').click(function(){
// $(document).scrollTop(0)
//过度效果
$('html').animate({
scrollTop:0
},1000)
})
})
</script>
本文地址：https://blog.csdn.net/Frazier1995/article/details/112054998