博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js隐藏与显示回到顶部按钮
阅读量:6207 次
发布时间:2019-06-21

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

现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个“回到顶部”的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适合查看内容的位置。

那么,如何控制“回到顶部”按钮的显示或隐藏呢?其实我们只需要实现window.onscroll 事件即可,代码如下:

复制代码
window.onscroll = function () {    if (document.documentElement.scrollTop + document.body.scrollTop > 100) {        document.getElementById("scrollto").style.display = "block";    }    else {        document.getElementById("scrollto").style.display = "none";    }}
复制代码

scrollto 为页面上“回到顶部”的容器(div标签)

本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/archive/2012/11/21/2780315.html,如需转载请自行联系原作者

你可能感兴趣的文章
004. ES6之函数的扩展
查看>>
安装mariadb、安装Apache
查看>>
JEESZ-SSO解决方案
查看>>
MyBatis之输入与输出(resultType、resultMap)映射
查看>>
剥开比原看代码09:通过dashboard创建密钥时,前端的数据是如何传到后端的?
查看>>
网站漏洞检测针对区块链网站安全分析
查看>>
为数据计算提供强力引擎,阿里云文件存储HDFS v1.0公测发布
查看>>
干货|Spring Cloud Bus 消息总线介绍
查看>>
IDEA去除mapper.xml文件中的sql语句的背景色
查看>>
一文详解java中对JVM的深度解析、调优工具、垃圾回收
查看>>
React 新 Context API 在前端状态管理的实践
查看>>
FFmpeg 是如何实现多态的?
查看>>
Java中的ReentrantLock和synchronized两种锁定机制的对比
查看>>
Node.js REPL(交互式解释器)
查看>>
java B2B2C springmvc mybatis电子商城系统(四)Ribbon
查看>>
CSS:元素塌陷问题
查看>>
Goalng软件包推荐
查看>>
Redis与Memcached的区别
查看>>
PHP程序员的技术成长规划
查看>>
OSChina 周四乱弹 ——妹子喜欢的是程序员 这是标准……
查看>>