在页面中经常需要使用到返回顶部按钮,如果页面内容过多过长,手动滑动滚动条比较麻烦,所以一般会出现返回顶部按钮,一键回到顶部。本文实现的返回顶部的效果,将按钮在滚动条指定高度出现,并固定的页面指定位置。显示为一张图片,鼠标放上显示的是返回顶部文字提示。实现国程如下:
1.在html文件中:
<div id="return-top" class="top_e">
<img src="/static/img/totop.png" width="60" id="img" >
<div style="width:60px;margin:auto;">
<p id='font' style="font-size:20px;margin-left:10px;display:none;">返回<br>顶部</p>
</div>
</div>
这里外面的div作为返回顶部的外层。
内部有两部分:
第一部分是一张图片,从阿里矢量图片库中下载好的矢量图片,如图:
当然也可以根据自己的需要,选择其他样式和颜色。
第二部分是’返回顶部‘四个字,这里需要换行,所以加了
标签。
2.css样式代码:
<style type="text/css">
.top_e{
position:fixed;right:10px;bottom:40px;
background:rgba(204,200,255,0.6);
border-radius:15px;
cursor:pointer;
display:none;
width:60px;
height:60px;
}
.top_e:hover
{
color:white;
background:#1296DB;
}
</style>
上面代码实现了对返回顶部按钮样式的控制,其中position是固定按钮的位置。
当然你也可以根据自己的需要进行调整。
3.js代码:控制按钮的显示和消失,也实现了图片和文件的动态转换。
// 控制按钮的显示和消失
$(window).scroll(function(){
if($(window).scrollTop()>300){
$('#return-top').fadeIn(300);
}
else{$('#return-top').fadeOut(200);}
})
// 点击按钮,使得页面返回顶部
$("#return-top").click(function(){
scrollTo(0,0);
});
// 鼠标悬浮按钮之上,图片消失,文字显示
$(".top_e").mouseover(function(){
$("#img").hide();
$("#font").show();
})
//鼠标离开,文字消失,图片显示。
$(".top_e").mouseout(function(){
$("#font").hide();
$("#img").show();
})
显示返回顶部按钮
鼠标悬浮于上,显示文字提示