首页 > 代码库 > 【技术】返回顶部
【技术】返回顶部
页面下拉到指定位置时，出现“返回顶部”；
页面上拉到指定位置时，隐藏“返回顶部”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
body,div,ul,li,a,img,h1,h2,h3,h4,h5,p,input{
margin:0;
padding:0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body{
font-family:"微软雅黑",Verdana, Arial, Helvetica, sans-serif;
position:relative;
}
img,input{
outline:none;
}
ul{
list-style:none;
}
a:link{
text-decoration:none;
color:#545454;
}
a:visited{
color:#525252;
}
a:hover{
color:#4D4D4D;
}
.clear{
clear:both;
}
.ui-page {
-webkit-backface-visibility: hidden;
}
.container{
padding:5px;
min-width:320px;
}
#one{
width:100%;
}
#one li{
float:left;
}
#one li .a-1{
min-height:70px;
}
#one li a{
display:block;
margin:5px;
background:yellow;
}
#one li img{
width:100%;
min-height:70px;
vertical-align: middle;
}
.scroll{
width:80px;
height:80px;
background:#64BFAE;
color:#fff;
line-height:80px;
text-align:center;
position:fixed;
right:30px;
bottom:50px;
cursor:pointer;
font-size:14px;
}
</style>
</head>
<body>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<p>Hello</p><p>向下拉滚动条</p>
<div class="scroll" id="scroll" style="display:none;">
回到顶部
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
showScroll();
function showScroll(){
$(window).scroll( function() {
var scrollValue=http://www.mamicode.com/$(window).scrollTop();
scrollValue > 100 ? $(‘div[class=scroll]‘).fadeIn():$(‘div[class=scroll]‘).fadeOut();
} );
$(‘#scroll‘).click(function(){
$("html,body").animate({scrollTop:0},200);
});
}
})
</script>
</body>
</html>
【技术】返回顶部