原生js回到顶部代码

时间: 2013-12-9 分类: Javascript 作者: SAI

TAGS:

经常看到回到顶部的效果,最简单的就是直接一个a标签,点击瞬间跳转到顶部,不过我们可以做的用户体验更好一点,就是当页面滚动到一定距离时才显示“回到 顶部”图标,点击图标时有个滚动的效果,这样感觉会更好点,要实现这样的效果,jquery很简单,在这里就不介绍了,但是如果只想要这一个效果,用 jquery未免大材小用了,今天写了个原生js的代码,分享出来看;

html:只要id=“gotop”就行,其它的你随便写

<a href="#" rel="nofollow" id="gotop">↑</a>

css:这里是用样式当标签定位到页面的右下角

<style type="text/css">
body,html{_background: url(alout:blank);}
a{text-decoration: none;text-align: center;color: #fff;font-size: 30px;font-weight: bold;}
.wrap{width: 500px;margin: 0 auto;}
#gotop{width:50px;height:50px;line-height: 50px; background: #f00;position: fixed;right: 20px;bottom:20px;display: none;_position: absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,20)||0)-(parseInt(this.currentStyle.marginBottom,20)||0)));}
</style>

js:

<script type="text/javascript">
function myScroll(){
var gotop=document.getElementById('gotop'),x=0,Fun=function(){
x=document.documentElement && document.documentElement.scrollTop||document.body&&document.body.scrollTop;
gotop.style.display=x>300?'block':'none';
};
window.setInterval(Fun,1);
gotop.onclick=function(){
var timer=setInterval(function(){
x=Math.floor(.7*x);
x<1&&clearInterval(timer);
window.scrollTo(x,x);
},1);
return false;
}
}
myScroll();
</script>
Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » Javascript » 原生js回到顶部代码
本文地址:http://www.saiody.com/?p=1035

返回顶部