用javascript制作返回顶部按钮

以前一直想实现的返回顶部按钮现在终于算是实现了,其实还是用到了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(这是我自己定的距离,),然后再次隐藏它,使一切回到初始状态。

发表评论

电子邮件地址不会被公开。 必填项已用*标注