用css和jQuery实现了一个页面返回顶部的功能:当页面滑动到一定距离,出现返回顶部的标志,点击后快速滑动返回页面顶部。
效果预览:
思路:
- 在页面顶部时没有返回顶部标志,页面滑动一定距离标志出现。这里需要用到 scroll() 方法 和scrollTop() 方法。
- 点击页面返回顶部我开始是想用<a>标签,通过定义href="#"返回顶部,可是使用<a>标签直接返回到顶部,没有滑动返回的过程,太生硬,所以我使用jQuery动画,通过scrollTop() 方法设置页面的垂直滚动条位置为0,即顶部。
HTML:
<div id="back-to-top"><img src="image/top.jpg" alt"返回顶部图片" title="返回顶部"> </div> <!--<a href="#"></a> 直接返回,无动态效果-->
<p class="p1">内容1</p>
<p class="p2">内容2</p>
<p class="p1">内容1</p>
<p class="p2">内容2</p>
css:
body{
margin:0;
padding:0;
}
#back-to-top{
width:70px;
height:70px;
overflow:hidden;
border-radius:50%;
position:fixed;
bottom:60px;
right:60px;
display:none;
cursor:pointer;
}
#back-to-top img{
width:70px;
height:70px;
}
p{
margin-top:20px;
width:100%;
height:300px;
}
.p1{
background:#FFBB99;
}
.p2{
background:#EE99FF;
}
jQuery:
$(document).ready(function(){
//出现
$(window).scroll(function(){
var topValue = $(window).scrollTop();
if(topValue>300){
$("#back-to-top").css("display","block");
}else{
$("#back-to-top").css("display","none");
}
});
//点击返回
$("#back-to-top").click(function(){
$("html,body").animate({ scrollTop: 0 }, 250);
});
});