主要介绍纯CSS实现回到页面顶部和利用jquery是下面回到页面顶部的方法。
//锚点跳转平滑过渡距离顶部距离0
$('.floor-bar-left a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 300);
return false;
});
//锚点跳转平滑过渡距离顶部距离100
$('.floor-bar-left a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top - 100
}, 300);
return false;
});
方法一：纯css实现回到顶部
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>纯css回到顶部</title>
</head>
<body>
<a name="top"></a>
<div style="width:100%; height:1500px;"></div>
<a href="#top" style="display:block;width:35px; height:42px; border:1px solid #000;
position:fixed; right:20px; bottom:20px;">回到<br/>顶部</a>
</body>
</html>
方法二：jquery的animate()方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>回到顶部</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style>
.f_conct {background-color: #0d5baa;position: fixed; z-index: 9999999;
top: 200px; right: -10px; cursor: pointer; transition: all .3s ease; }
.f_bar .f_top {background: #0d5baa url(images/fiex.png) no-repeat 0 -8px; }
</style>
</head>
<body>
<div style="height: 2000px"></div>
<div class="f_conct" style="right:0;">
<div class="f_bar">
<ul>
<li class="f_top">返回顶部</li>
</ul>
</div>
</div>
------重点！！！！！！！------
<script>
$(".f_top").click(function(){
$("html,body").animate({
'scrollTop':'0'
},300);
});
</script>
</body>
</html>
资源均来自第三方，谨慎下载，前往第三方网站下载
