以前一直想实现的返回顶部按钮现在终于算是实现了,其实还是用到了JS里的setTimeout()
方法,另一篇关于setTimeout()
方法的介绍的文章可以点击这里:
https://blog.yeskn.com/archives/536.html
我的这个返回顶部的按钮做的比较简单,因为需要符合网站一致的风格,所以只添加了“返回顶部”这四个字当做按钮,并且我看到似乎豆瓣也是这样么做的。你可以在我的首页的右下角看到他,或许你已经发现了吧。
这个效果是模仿极客公园的效果做的,原始的效果可以点http://geekpark.net 查看。
主要的效果是点击返回顶部按钮的时候,出现一个小火箭,然后网页动态的返回顶部,当到达顶部的时候,小火箭就往上飞,直到消失。
点击此处查看DEMO:https://blog.yeskn.com/uploads/back-to-up.html
我写的代码如下:
<script>
var ptt=0;
function pageScroll() {
document.getElementById('flypig').style.display='block';
window.scrollBy(0,-10); //每次上升10px
scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次
if(document.body.scrollTop==0) {
document.getElementById('flypig').style.marginBottom=ptt;
ptt=ptt+10;
}//火箭向上飞的效果
if(ptt>=1000){
ptt=0;
document.getElementById('flypig').style.marginBottom=20;
document.getElementById('flypig').style.display='none';
clearTimeout(scrolldelay);
}//返回原始状态
//pageScroll ends
}
</script>
html部分代码:
<div style="display:none;float:left;position:fixed;
bottom:20;margin-left:75%;cursor:pointer;"
id="flypig">
<img src="<?php bloginfo('template_directory'); ?>/images/flypig.gif" />
</div>
<div style="float:left;position:fixed;
bottom:10;margin-left:75%;cursor:pointer;"
id="go" onclick="pageScroll()">返回顶部
</div>
详解:首先想看到效果的话请滚动窗口滚动条向下一定的距离,然胡,点击‘返回顶部’这个div,然后id为flypig的div的display属性从none变为block,即就将小火箭显示出来,然后开始10px的速度返回顶部,当小火箭与底部的距离(ppt)大于1000px的时候,就停止setTimeout,并将ppt置零,然后再将小火箭向下的距离设为20(这是我自己定的距离,),然后再次隐藏它,使一切回到初始状态。