<html>
<head></head>
<body>
<a id="top"></a>
.........................
<!--在返回顶部按钮处写-->
<a href="#top">返回顶部</a>
</body>
</html>
js的写法
页面上的返回顶部按钮
<button type="button" onclick="GoTop()"></button>
js中的写法
function GoTop(){
if (document.body &&document.body.scrollTop &&document.body.scrollLeft)
{
document.body.scrollTop=0
}
if (document.documentElement &&document.documentElement.scrollTop &&document.documentElement.scrollLeft)
{
document.documentElement.scrollTop=0
}
}
点击回顶部，或是回某个位置，主要是设置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条）