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

一直没有添加 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 文件的统一管理。

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

网页回到顶部 GoTop 按钮自动隐藏相关推荐

php 回到顶部,jquery如何实现点击网页回到顶部效果？（图文+视频）
本篇文章主要给大家介绍如何用jquery代码实现网页回到顶部的效果. 我们在浏览各大网站页面时,想必大家肯定都遇到过,当阅览一个长页面时,拉到下面部分会出现类似回到顶部的按钮特效吧. 这种点击回到顶部 ...
html 两个idv上下居中,Django搭建个人博客：回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏...
本章集中介绍四个重要的小功能:回到顶部浮动按钮.矢量图标.页脚沉底和粘性侧边栏. 这几个功能与Django基本没啥关系,更多的是前端知识,但是对博客网站都很重要,问的读者也比较多,因此也集中讲一下好了 ...
在UIWindow上加类似于“回到顶部”的按钮
在公司上个版本的开发中遇到了一个UI布局的小问题: 某个页面需要增加一个分享按钮,但是该页面是二级页面,导航栏右边也已经放置了2个button. 起初和老大谈论这个问题的时候想到的方法是导航栏右边加三 ...
小程序制作回到顶部按钮
我们先看一下效果吧,直接上图. 第一种情况,当页面在顶部的时候,回到顶部按钮是不会出现的. 第二种情况,当页面在离开顶部一定距离的时候,回到顶部按钮出现接下就是对代码的分析了: 在这里我们如果要使用 ...
better-scroll的封装实现回到顶部按钮
better-scroll的封装实现回到顶部按钮话不多说先上效果: 实现better-scroll封装之前,先了解better-scroll的使用初始化等操作[better-scroll初始化] b ...
BackToTop.js 为你的网站添加“回到顶部”按钮
图片来源:Inspiring Wallpapers 就像上图中的超人一样,你的读者也想要一飞冲天的感觉. 没错,你的网站需要一个 "回到顶部" 的按钮. 每当你的文章写得很长,或者 ...
一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部
前言今天在网上搜索"回到顶部"的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery ...
php 回到顶部,回到顶部总结
回到顶部总结网站中的回到顶部功能有益于增强用户体验,当一个页面很长很长时,回到顶部是必不可少的. 回到顶部按钮,可以使用图片,背景图,矢量字体图标,也可以使用代码 css 生成.这里使用 css 生 ...
微信小程序自定义回到顶部
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.自定义回到顶部按钮二.使用步骤 1.第一步获取屏幕被卷去多少距离 2.进行判断,例如我需要屏幕滚到大于600的时 ...
回到顶部效果之加速置顶
我在半年前接触过相关案例,最近重新看了一下,添加了详尽的注释,希望对初学者能有所帮助. <!doctype html> <html> <head> <meta ...

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

网页回到顶部 GoTop 按钮自动隐藏相关推荐

最新文章

热门文章