网站的网页中都有返回顶部的功能，就是当用户访问网页时，可以迅速的返回顶部。也许会有人觉得这个功能很简单，没有什么说的，但据我目前所知，就有五种方法实现这个功能。而且不同的方法能实现的效果也是有所不同的。下面介绍下这些方法网页中“返回顶部”的html代码有好几种不同的编写方式：
1、简单的脚本可实现此功能：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>返回顶部</title>
<style type="text/css">
body{height:1000px}
</style>
</head>
<body>
<div style="height:800pxwidth:800px"></div>
<a href="javascript:scroll(0,0)">返回顶部</a>
</body>
</html>
2、采用JS实现返回顶部：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>返回顶部</title>
<style type="text/css">
body{height:1000px}
</style>
</head>
<body>
<div style="height:800pxwidth:800px"></div>
<script src="js/gototop.js"></script>
<div class="back-top-container" id="gotop">
<div class="yb_conct">
<div class="yb_bar">
<ul>
<li class="yb_top">返回顶部</li>
</ul>
</div>
</div>
</div>
</body>
</html>
3、利用锚点返回顶部：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>返回顶部</title>
</head>
<body>
<a href="#5F">顶部</a>
<div style="height:300pxwidth:300px"></div>
<a name="5F">返回顶部</a>
</body>
</html>
将下面的代码保存成一个JS文件。然后在页面里调用。其中/backtotop.gif为返回顶部的图片。
function setCss(){var a=[]a.push(".back_to_top{display:nonewidth:50pxheight:50pxoverflow:hiddenright:40pxposition:fixed bottom:50px_position:absolute_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-134))}\n")a.push(".back_to_top a{display:inline-blockwidth:50pxheight:50pxoverflow:hiddenbackground:url(/backtotop.gif) 0px 0px no-repeat}\n")a.push(".back_to_top a:hover{background-position:-50px 0px}")try{var b=document.createStyleSheet()b.cssText=a.join("")}catch(c){var b=document.createElement("style")b.type="text/css"b.textContent=a.join("")document.getElementsByTagName("HEAD").item(0).appendChild(b)}}function createLink(){var a=document.createElement("div")a.id="JS_back_to_top"a.className="back_to_top"a.innerHTML='<a href="#" title="返回顶部"></a>'document.body.appendChild(a)}function GetPageScroll(){var b,aif(window.pageYOffset){a=window.pageYOffsetb=window.pageXOffset}else{if(document.documentElement&&document.documentElement.scrollTop){a=document.documentElement.scrollTopb=document.documentElement.scrollLeft}else{if(document.body){a=document.body.scrollTopb=document.body.scrollLeft}}}return{x:b,y:a}}if(window.attachEvent){window.attachEvent("onscroll",backToTop)}else{window.addEventListener("scroll",backToTop,false)}function backToTop(){if(GetPageScroll().y>300){document.getElementById("JS_back_to_top").style.display="block"}else{document.getElementById("JS_back_to_top").style.display="none"}}setCss()createLink()
点击回顶部，或是回某个位置，主要是设置scrollTop。
下面是一个简单回顶的例子：
下面的例子是缓慢回顶。如果将快速回顶，可以直接让scrollTop = 0；就可以了。
<style>body{height:5000px}
input {position:fixed bottom:0px right:0px}
</style>
<script>
window.onload=function(){
var oBtn = document.getElementById('btn')
var timer = null
var bFlag = false
oBtn.onclick=function(){
moveScroll(0,3000)
}
window.onscroll=function(){
if(bFlag)
{
clearInterval(timer)
}
bFlag=true
}
function moveScroll(target,time)
{
var start = document.documentElement.scrollTop || document.body.scrollTop
var dis = target - start
var count = Math.floor(time/30)
var n=0
clearInterval(timer)
timer = setInterval(function(){
n++
bFlag=false
document.documentElement.scrollTop = start + dis*n/count
document.body.scrollTop = start+dis*n/count
if(n==count)
{
clearInterval(timer)
}
},30)
}
}
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）