热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

js隐藏与显示回到顶部按钮及window.onscroll事件应用

现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个“回到顶部”的按钮或连接;那么,如何控制“回到顶部”按钮的显示或隐藏呢;本文介绍详细实现方法,感兴趣的你可不要走开哦
现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个“回到顶部”的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适合查看内容的位置。

那么,如何控制“回到顶部”按钮的显示或隐藏呢?其实我们只需要实现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标签)

推荐阅读
  • 美国网络安全:MITRE Shield 积极防御知识库解析
    本文深入解析了MITRE Shield积极防御知识库,探讨其在网络安全领域的应用及意义。 ... [详细]
  • J2EE平台集成了多种服务、API和协议,旨在支持基于Web的多层应用开发。本文将详细介绍J2EE平台中的13项关键技术规范,涵盖从数据库连接到事务处理等多个方面。 ... [详细]
  • 对于初次购买阿里云服务器的新手用户来说,如何高效地利用服务器资源并成功部署网站是一个重要的课题。本文将详细指导您完成从购买服务器到网站上线的六个关键步骤。 ... [详细]
  • 深入解析 RuntimeClass 及多容器运行时应用
    本文旨在探讨RuntimeClass的起源、功能及其在多容器运行时环境中的实际应用。通过详细的案例分析,帮助读者理解如何在Kubernetes集群中高效管理不同类型的容器运行时。 ... [详细]
  • 本文详细介绍了如何在Vue项目中集成和配置XGPlayer视频插件,包括安装步骤、基本配置以及常见问题的解决方法。 ... [详细]
  • Kubernetes 实践指南:初次体验
    本文介绍了如何通过官方提供的简易示例,快速上手 Kubernetes (K8S),并深入理解其核心概念和操作流程。 ... [详细]
  • 深入解析Nacos服务自动注册机制
    本文将探讨Nacos服务自动注册的具体实现方法,特别是如何通过Spring事件机制完成服务注册。通过对Nacos源码的详细分析,帮助读者理解其背后的原理。 ... [详细]
  • 微服务自动化.dockercompose
    目录一、docker-compose二、docker-compose安装与配置1、修改docker.service2、下载文件3、将刚才下载的docker-compose文 ... [详细]
  • SpringBoot底层注解用法及原理
    2.1、组件添加1、Configuration基本使用Full模式与Lite模式示例最佳实战配置类组件之间无依赖关系用Lite模式加速容器启动过程,减少判断配置类组 ... [详细]
  • 本文探讨了在不同场景下如何高效且安全地存储Token,包括使用定时器刷新、数据库存储等方法,并针对个人开发者与第三方服务平台的不同需求提供了具体建议。 ... [详细]
  • 本文探讨了一个Web工程项目的需求,即允许用户随时添加定时任务,并通过Quartz框架实现这些任务的自动化调度。文章将介绍如何设计任务表以存储任务信息和执行周期,以及如何通过一个定期扫描机制自动识别并加载新任务到调度系统中。 ... [详细]
  • Docker基础入门与环境配置指南
    本文介绍了Docker——一款用Go语言编写的开源应用程序容器引擎。通过Docker,用户能够将应用及其依赖打包进容器内,实现高效、轻量级的虚拟化。容器之间采用沙箱机制,确保彼此隔离且资源消耗低。 ... [详细]
  • Docker运行中实例端口映射调整方法
    本文探讨了在Docker容器运行期间调整端口映射的方法,包括前期规划与运行时需求变更两种常见场景下的解决方案。 ... [详细]
  • 春季职场跃迁指南:如何高效利用金三银四跳槽季
    随着每年的‘金三银四’跳槽高峰期的到来,许多职场人士都开始考虑是否应该寻找新的职业机会。本文将探讨如何制定有效的职业规划、撰写吸引人的简历以及掌握面试技巧,助您在这关键时期成功实现职场跃迁。 ... [详细]
  • 本文探讨了如何在Docker构建过程中使用动态环境变量,特别是针对Docker v1.9及以上版本的用户。我们将介绍如何声明和使用构建参数,以及这些参数对构建缓存的影响。 ... [详细]
author-avatar
乘浪追风2010_210
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有