注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

神殿天堂

神仙的家园

 
 
 

日志

 
 

网页回到顶部 GoTop 按钮自动隐藏  

2014-06-06 15:37:00|  分类: 返回顶部,javascr |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一直没有添加 GoTop 回到顶部自动隐藏的 JS,只是简单固定在一个位置,有时候会挡住部分视线,尽管我的右下角几乎是没有可挡的内容。

今天趁着有空折腾,这里记录一下使用过程。

完整代码如下:

<div style="display: block;" id="gotop"></div><script type="text/javascript">    backTop=function (btnId){        var btn=document.getElementById(btnId);        var d=document.documentElement;        var b=document.body;        window.onscroll=set;        btn.onclick=function (){            btn.style.display="none";            window.onscroll=null;            this.timer=setInterval(function(){                d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);                b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);                if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set);            },10);        };        function set(){btn.style.display=(d.scrollTop+b.scrollTop>100)?'block':"none"}    };    backTop('gotop');</script>


自己已经有 top 按钮代码和样式了,所以不用另外添加 html 和 css,第一句就用不着了,添加一个 id=gotop 即可了,另外如果有 id 完全可以修改自己的 id 或者修改 js 代码中最后一句的调用 id 名称。

<div><a class="top" id="gotop"></a></div>

为不影响自己的样式,直接添加了 id=”gotop”,然后清理缓存,就出效果了。

后来考虑到 footer 中放这么一堆代码比较乱,直接打包成一个 gotop.js 文件,直接调用就省事多了。

新建记事本,复制以上代码,简单修改后如下:

jQuery(document).ready(function($) {    backTop = function(btnId) {        var btn = document.getElementById(btnId);        var d = document.documentElement;        var b = document.body;        window.onscroll = set;        btn.onclick = function() {            btn.style.display = "none";            window.onscroll = null;            this.timer = setInterval(function() {                d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);                b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);                if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);            },            10);        };        function set() {            btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"        }    };    backTop('gotop');});


之后保存为 gotop.js,直接调用就搞定了。代码如下:

<script type="text/javascript" src="http://www.tanglangxia.com/wordpress/wp-content/themes/creatic11/js/gotop.js"></script>

把其中的 src 链接修改成自己的 js 链接即可。

测试没问题之后,百度搜 JS 压缩,把之前的 JS 代码简单压缩一下,混淆就算了,覆盖原代码,保存完毕。

最后用到了 JS 文件的合并与判断页面加载,把自己的 JS 在这里加载,完美实现选择性页脚加载 JS 以及 JS 文件的统一管理。

  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018