写页面的时候，经常遇到当滚动条离开页面顶部的时候，会显示一个回到顶部的按钮，点击回到顶部，页面就滑动到页面的顶部。直接贴代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>返回顶部</title>
<script src="jquery-1.11.3.js"></script>
<style>
.img1{
width:100%;
height:428px;
background:url("MTwoYear1.png") no-repeat center;
}
.wrapper{
position:relative;
}
.rt_back{
position:fixed;
width:42px;
height:42px;
bottom:20px;
right:20px;
}
</style>
</head>
<body lang="zh-cn">
<div class="wrapper">
<div class="img">
<div class="img1"></div>
<div class="img1"></div>
<div class="img1"></div>
<div class="img1"></div>
<div class="img1"></div>
<div class="img1"></div>
<div class="img1"></div>
<div class="img1"></div>
<div class="img1"></div>
<div class="img1"></div>
<div class="img1"></div>
<div class="img1"></div>
</div>
</div>
<div class="rt_back">
<img src="dingbu.png">
</div>
<script>
(function(){
$(".rt_back").hide();
$(window).scroll(function(){
if($(window).scrollTop()>0){
$(".rt_back").fadeIn(400);
}else{
$(".rt_back").fadeOut(400);
}
});
})(window);
$(".rt_back").click(function(){
$("html,body").animate({
scrollTop:‘0‘
},1000);
});
</script>
</body>
</html>
这是向上按钮的图片。
时间： 2024-10-15 16:15:50