博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
网页回到顶部 GoTop 按钮自动隐藏
阅读量:4592 次
发布时间:2019-06-09

本文共 1378 字,大约阅读时间需要 4 分钟。

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

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

完整代码如下:

 

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

为不影响自己的样式,直接添加了 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,直接调用就搞定了。代码如下:

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

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

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

转载于:https://www.cnblogs.com/zagelover/articles/3772759.html

你可能感兴趣的文章
React之特点及常见用法
查看>>
【WEB前端经验之谈】时间一年半,或沉淀、或从零开始。
查看>>
优云软件助阵GOPS·2017全球运维大会北京站
查看>>
java23中设计模式只责任链模式
查看>>
linux 装mysql的方法和步骤
查看>>
poj3667(线段树区间合并&区间查询)
查看>>
51nod1241(连续上升子序列)
查看>>
SqlSerch 查找不到数据
查看>>
集合相关概念
查看>>
Memcache 统计分析!
查看>>
(Python第四天)字符串
查看>>
个人介绍
查看>>
使用python动态特性时,让pycharm自动补全
查看>>
NSDate
查看>>
堆排序
查看>>
java架构《Socket网络编程基础篇》
查看>>
HASH、HASH函数、HASH算法的通俗理解
查看>>
easyui学习日记20141213
查看>>
getopt()函数
查看>>
第八届极客大挑战 Re
查看>>