之前分享過(guò)太多返回頂部了，再來(lái)分享一個(gè)，稍后會(huì)做出一個(gè)返回頂部方法聚合來(lái)！
所謂的返回頂部，就是下拉后，點(diǎn)擊返回頂部可以迅速回到網(wǎng)頁(yè)頂部，提高用戶操作網(wǎng)站的用戶體驗(yàn)，現(xiàn)在幾乎所有網(wǎng)站都要支持這個(gè)返回頂部功能！
之前陸續(xù)分享了好幾篇關(guān)于返回頂部的JS特效代碼，不管是最原始的即插即用的javascript，還是需要JQuery支持的JS，都測(cè)試通過(guò)可以正常使用，今天本文介紹的也是經(jīng)過(guò)測(cè)試，可以正常返回頂部的代碼：
<!DOCTYPE HTML>
<html>
<head>
<title>用jQuery實(shí)現(xiàn)返回頂部滑動(dòng)跳轉(zhuǎn)效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body, p, a, div {
margin: 0px;
padding: 0px;
}
#back-to-top {
position: fixed;
bottom: 100px;
left: 60px;
}
#back-to-top a {
text-align: center;
text-decoration: none;
color: #d1d1d1;
display: block;
width: 80px;
/*使用CSS3中的transition屬性給跳轉(zhuǎn)鏈接中的文字添加漸變效果*/
-moz-transition: color .1s;
-webkit-transition: color .1s;
-o-transition: color .1s;
}
#back-to-top a:hover {
color: #979797;
}
#back-to-top a span {
background: #d1d1d1;
border-radius: 6px;
display: block;
height: 80px;
width: 80px;
background: #d1d1d1 url(http://demo.jb51.net/js/2014/return-top/images/arrow-up.png) no-repeat center center;
margin-bottom: 5px;
-moz-transition: background .1s;
-webkit-transition: background .1s;
-o-transition: background .1s;
}
#back-to-top a:hover span {
background: #979797 url(http://demo.jb51.net/js/2014/return-top/images/arrow-up.png) no-repeat center center;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//首先將#back-to-top隱藏
$("#back-to-top").hide();
//當(dāng)滾動(dòng)條的位置處于距頂部100像素以下時(shí)，跳轉(zhuǎn)鏈接出現(xiàn)，否則消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(150);
}
else
{
$("#back-to-top").fadeOut(150);
}
});
//當(dāng)點(diǎn)擊跳轉(zhuǎn)鏈接后，回到頁(yè)面頂部位置
$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},100);
return false;
});
});
});
</script>
</head>
<body id="top">
<p id="back-to-top"><a href="#top"><span></span>回到頂部</a></p>
<h1>Demo</h1>
<h2>用jQuery實(shí)現(xiàn)返回頂部滑動(dòng)跳轉(zhuǎn)效果</h2>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
<p>測(cè)試文本</p>
</body>
</html>