页面回到顶部的几种实现方式

一·锚点标记返回
优点:简单
确定:地址栏显示锚标记
设置锚点:<a name="top" id="top"></a>
返回链接:<a href="#top" target="_self">返回顶部</a>

二·使用javascript scroll函数返回顶部
两种实现方式
1·<a href="javascript:scroll(0,0)">返回顶部</a>
想要定位到其他位置,直接修改scroll参数即可
2·渐进跳回
function pageScroll() {
window.scrollBy(0,-10);
scrolldelay = setTimeout('pageScroll()',100);
}
<a href="pageScroll();">返回顶部</a>

if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay);
三·其他(来自网络)
BackTop=function(btnId){
var btn=document.getElementById(btnId);
var d=document.documentElement;
window.onscroll=set;
btn.onclick=function (){
btn.style.display="none";
window.onscroll=null;
this.timer=setInterval(function(){
d.scrollTop-=Math.ceil(d.scrollTop*0.1);
if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);
},10);
};
function set(){btn.style.display=d.scrollTop?'block':"none"}
};
BackTop('gotop');

你可能感兴趣的:(页面回到顶部的几种实现方式)