开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用滚动位置切换按钮的可见性，使用普通的JavaScript (无JQuery)。注重性能

滚动位置切换按钮的可见性是指根据页面滚动的位置，动态显示或隐藏一个切换按钮，以提供更好的用户体验。以下是一个使用普通的JavaScript实现滚动位置切换按钮可见性的示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    #scrollButton {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 页面内容 -->
  
  <button id="scrollButton">回到顶部</button>

  <script>
    window.addEventListener('scroll', function() {
      var scrollButton = document.getElementById('scrollButton');
      if (window.pageYOffset > 100) {
        scrollButton.style.display = 'block';
      } else {
        scrollButton.style.display = 'none';
      }
    });

    document.getElementById('scrollButton').addEventListener('click', function() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>

上述代码中，我们首先在页面底部添加了一个按钮元素，id为"scrollButton"，并设置其初始样式为display: none;，即隐藏按钮。然后，通过监听window对象的scroll事件，当页面滚动超过100像素时，将按钮的显示样式设置为display: block;，即显示按钮；否则，将按钮的显示样式设置为display: none;，即隐藏按钮。最后，通过监听按钮的点击事件，当按钮被点击时，使用window.scrollTo()方法将页面滚动到顶部，并添加了平滑滚动的效果。

这种滚动位置切换按钮的可见性在长页面中非常有用，可以让用户快速返回页面顶部，提升用户体验。在实际应用中，可以根据需求进行样式和交互的定制，例如修改按钮的位置、样式、文本等。

腾讯云相关产品和产品介绍链接地址：

腾讯云主页：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云函数（SCF）：https://cloud.tencent.com/product/scf
云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Meta Universe）：https://cloud.tencent.com/solution/meta-universe

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JavaWeb04-jQuery(Java真正的全栈开发)

jQuery 一.jQuery入门 1.javascript类库 JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。...核心理念是write less,do more(写得更少,做得更多) 当前流行的 JavaScript 库有： jQuery 使用非常多了 EXTJS 功能比jQuery更多，但ext2.0收费 Prototype...它是轻量级的js库，它兼容CSS3，还兼容各种浏览器。 jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。...格式：{"top": xx , "left" : yy} offset(坐标) 设置位置 position() 获得相对父元素偏移 scrollTop([val]) 获得或设置垂直滚动条的位置 scrollLeft...([val]) 获得或设置水平滚动条的位置 6.尺寸 height([val]) 获得或设置高度 width([val]) 获得或设置宽度五.文档处理内部插入,外部插入,复制,替换

2.3K9 0

前端组件整理

表单元素美化 uniform 提供对下拉框，单，复选框，按钮等表单元素的美化 select2 多选下拉框 DropKick 下拉框，单，多选。...该组件依赖Twitter Bootstrap, Moment.js和jQuery. 自定义滚动条 perfect scrollbar 轻量级的滚动条。外观与mac上chrome的滚动条一样。...用滚轮来翻页 turn.js 做一本书，带漂亮的翻页的效果幻灯 coin-slider 兼容IE6。蛮好的~。不过其切换方式是一块块的。不能配置切换方式。。。...wowslider 幻灯切换时各种很炫的效果。收费。 cycle2 普通的幻灯，竟然不支持垂直滚动。。。 jcarousel 普通的幻灯，不兼容IE6 reveal 3d滚动。...DlHighlight 仅支持JavaScript、CSS、XML、HTML 这4语法高亮 please 按要求随机舒服的颜色其他类 Ink 响应式html邮件框架性能测试抓取，解析RSS

12.7K4 0

jQuery Mobile的学习时间botton按钮的事件学习

最近在学习jquery mobile开发，使用的button，绑定事件，和大家一起学习，一起分享！直接上代码： <!...使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed...使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed...使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed...throttledresize 启用可标记 #hash 历史记录 updatelayout 由动态显示/隐藏内容的 jQuery Mobile 组件触发。

1.6K2 0

前端常用插件

库 stellar.js: 前端用于实现异步滚动效果的库，现已不再维护 skrollr: 另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果，看真相 Framework7:...，可以为 JSON 创建索引，离线也可以使用 jquery.hotkeys: jQuery 插件，用于绑定热键 breach_core: Javascript 编写的 Browser (浏览器) octocard...: 轻量级的数字、货币转换库 javascript-algorithms: Javascript 实现的各种算法集合 lazy.js: 类似于 underscore, 但是会延迟执行，某些场景下，性能会有很大的提升...LocalStorage 的资源加载器，可以用来缓存 script 和 css, 手机端使用速度快于浏览器直接缓存 iscroll: 高性能的滚动(scroll)处理库，功能强大，支持各种事件，不依赖任何的库...插件 Swipe: 非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb slick: 功能异常强大的一个图片滑动切换效果库 SocialButtons: 漂亮的社交按钮

4.7K6 1

Jump Start Bootstrap 第4章

Bootstrap使用JQuery库来完成全部和JavaScript相关的操作；因此，在Bootstrap中自定义JavaScript相关操作，导入JQuery.js是必须的。...要通过JQuery触发下拉插件，你需要使用方法dropdown(); $().dropdown('toggle'); 在页面加载后，我们可以使用这个方法把下拉插件的从关闭状态切换到开启状态。...按钮在前面的章节中，我们看到了如何创建各种类型的按钮。这里，我们将看到使用Bootstrap的JavaScript插件如何在不同的状态使用它们，并且让它们切换状态。...该插件在任何DOM元素中侦听滚动，并根据元素的滚动位置在导航栏中突出显示菜单项。基本上，它是一个双组件的插件;它由一个导航条和一个内容区域组成。内容区域划分为多个部分，每个部分都有一个惟一的ID。...show属性用于通过JavaScript切换模式的可见性。当设置为true时，模式对话框将自动显示，不需要单击任何句柄元素。

28.3K4 0

JavaScript资源大全中文版（Awesome最新版）

minilog –使用Stream-API后端的轻量级客户端和服务器端日志记录 storyboard -通用日志库+ Chrome扩展; 它允许您在单个位置查看由用户操作触发的所有客户端和服务器任务 RegExp...Ladda - 内置负载指示灯按钮。...vanilla-masker -纯JavaScript屏蔽输入。 Ion.CheckRadio -jQuery插件用于样式复选框和单选按钮。带皮肤支持。...baguetteBox.js - 使用纯粹的JavaScript编写的简单易用的灯箱脚本。 colorbox -一个重量轻，可定制的jQuery插件。...iscroll -iScroll是一个高性能，小尺寸，无依赖关系，多平台JavaScript滚动。 skrollr - 用于移动（Android + iOS）和桌面的独立视差滚动库。

15.1K11 2

JavaScript 学习-35.jQuery 基础语法与事件

前言 jQuery 是一个轻量级的”写的少，做的多”的 JavaScript 库。...AJAX Utilities 环境准备在网页中使用 jQuery 可以使用以下方法：从 jquery.com 下载 jQuery 库从 CDN 中载入 jQuery, 如从 Google 中加载...入口函数: window.onload = function () { // 执行代码 } jQuery 入口函数与 JavaScript 入口函数的区别： jQuery 的入口函数是在 html...隐藏和显示 jQuery 提供了隐藏和显示元素的基本方法 hide() 隐藏元素 show() 显示元素 toggle() 切换显示和隐藏示例如果你点击“隐藏” 按钮，我将会消失...《JMeter 性能测试实战》课程6月15号开学

1.9K1 0

Web前端开发（高级）下册-目录

jquery mobilejquery mobile的诞生jquery mobile的安装jquery mobile的使用 jquery mobile页面jquery mobile过渡jquery mobile...定位jquery mobile按钮 jquery mobile图标jquery mobile导航栏jquery mobile折叠jquery mobile列布局jquery mobile列表 jquery...mobile表单单选按钮复选框选择菜单范围滑块切换开关 jquery mobile主题jquery mobile实战jquery mobile事件 jquery mobile页面事件jquery mobile...触摸事件jquery mobile滚动事件jquery mobile方向事件网页设计平台差异性性能优化与自动化技术 web前端开发概述web前端开发认识web前端开发技术web前端开发常见问题 web...javascript代码可扩展性javascript代码可调试性 javascript dom 优化提升文件加载速度javascript dom 操作优化javascript dom 脚本加载优化 webpack

1.2K3 0

返回顶部的五种实现方法

-- 很多内容 --> 返回顶部【4】使用简单的JavaScript脚本设置scrollTo(x,y)中的x和y的坐标值来滚动到页面的具体位置...-- 很多内容 --> 返回顶部【5】使用简单的jQuery实现 1 2 3 $(document).ready(function...实现）上面几种方式实现起来比较简单，但是效果生硬，直接从底部切换到顶部，没有一个过渡的动画。...此方法能使页面动态滚动，同时将按钮换成一个箭头标志，判断页面滚动的距离，当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。

5K2 0

day40_jQuery学习笔记_01

能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。 1.2、当前流行的 JavaScript 库有： jQuery，最流行 EXT_JS，版本2.0以后开始收费（不包括版本2.0）。...1.3、jQuery 的介绍 JQuery是继prototype之后又一个优秀的Javascript库。...轻量级：依赖程序少，占用的资源少特点：js代码和html代码分离 jQuery已经成为最流行的 javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。...垂直滚动条，滚过的距离 scrollLeft() 水平滚动条，滚过的距离 scrollLeft(...) ...-- 默认不是普通按钮，而是提交按钮，需要进行设置 --> <input type="submit" value="提交<em>按钮</em>"/

6.6K2 0

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

，它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等...mCSB_buttons.png：这个 png 图片文件，包含了向上向下向左向右滚动的按钮。可以使用 CSS sprites 技术，来使用这个图片中的相应按钮。...默认是垂直滚动条值可为:true(创建水平滚动条) 或 false scrollInertia:Integer：滚动的惯性值在毫秒中使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑) scrollEasing...原理就是这样的：首先获取要修改滚动条样式的内容区块，然后使用 CSS 隐藏掉默认滚动条，然后使用 Javascript 添加很多 HTML 结构，再配合 CSS 做出一个滚动条的效果。...然后再使用 CSS 定义滚动条的样式，使用 Javascript 相应鼠标的滚动事件，产生滚动下滑的效果。明白了这点，下面我们就可以看一下滚动条的结构，然后使用 CSS 对其进行定义了。

13.9K3 0

「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源

Ladda - 带内置装载指示器的按钮。...jQRangeSlider - 支持日期的JavaScript滑块选择器。 noUiSlider - 轻量级，高度可定制的范围滑块，无膨胀。...vanilla-masker - 纯JavaScript掩码输入。 Ion.CheckRadio - 用于样式复选框和单选按钮的jQuery插件。有皮肤支持。...iscroll - iScroll是一款高性能，占用空间小，无依赖，多平台的JavaScript滚动条。 skrollr - 适用于移动设备（Android + iOS）和桌面的独立视差滚动库。...jqvmap - jQuery矢量地图库。 OpenLayers3 - 一个高性能，功能丰富的库，可满足您的所有映射需求。

6.6K2 1

前端插件以及部分细分网址梳理

: 一个用于模拟人输入状态的 JS 库 stellar.js: 前端用于实现异步滚动效果的库，现已不再维护 skrollr: 另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果...类似于 Solr, 但是用于浏览器上的全文搜索引擎，可以为 JSON 创建索引，离线也可以使用 jquery.hotkeys: jQuery 插件，用于绑定热键 breach_core: Javascript...(进入、退出等)，性能很好 ScrollMagic: 神奇的滚动交互效果插件，可以在滚动的过程中设置各种各样的动态效果 infinite-scroll: 滚动加载，滚动到最下到自动加载， Paul Irish...LocalStorage 的资源加载器，可以用来缓存 script 和 css, 手机端使用速度快于浏览器直接缓存 iscroll: 高性能的滚动(scroll)处理库，功能强大，支持各种事件，不依赖任何的库...插件 Swipe: 非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb slick: 功能异常强大的一个图片滑动切换效果库 SocialButtons: 漂亮的社交按钮

5.6K9 0

「沙里淘金」精选浏览器端JavaScript库资源推荐

Ladda - 带内置装载指示器的按钮。...jQRangeSlider - 支持日期的JavaScript滑块选择器。 noUiSlider - 轻量级，高度可定制的范围滑块，无膨胀。...vanilla-masker - 纯JavaScript掩码输入。 Ion.CheckRadio - 用于样式复选框和单选按钮的jQuery插件。有皮肤支持。...iscroll - iScroll是一款高性能，占用空间小，无依赖，多平台的JavaScript滚动条。 skrollr - 适用于移动设备（Android + iOS）和桌面的独立视差滚动库。...jqvmap - jQuery矢量地图库。 OpenLayers3 - 一个高性能，功能丰富的库，可满足您的所有映射需求。

5.8K2 0

那些前端常用的网站插件

— 快速实现全屏滚动特性 Typed.js — 打字机效果 Waypoints.js — 滚动到某个元素位置时触发一个功能 Highlight.js — web 语法高亮 Chart.js — 使用 JavaScript... — 滚动时展现动画 Scrolline.js — 页面滚动时显示滚动进度 Velocity.js — 快速流畅的 JavaScript 动画 Animate on scroll — 漂亮的页面滚动元素动画...Handlebars.js — Javascript 模板 jInvertScroll — 视差滚动 One page scroll — 又一个页面滚动库 Parallax.js — 对智能设备方向变化做出响应的视差引擎... — 两列垂直反向滚动 Favico.js — 动态 favicon Midnight.js — 固定头部切换效果 Anime.js — 动画库 Keycode — 获取键盘按键的 JavaScript...CSS 创建 on/off 开关、radio 按钮 UI Kit — 框架 Bootstrap — 框架 Foundation — 框架有用的产品/链接 cheatsheet — 可以写在中的所有标签

4.4K5 0

javaWeb核心技术第五篇之jQuery

(写的更少,做的更多) - jQuery入门 - jQuery和html整合 - 下载 - 下载地址:www.jquery.com - 使用script的src属性即可...= $("选择器"); $("#id值"); val();" - javaScript和jquery区别 - 注意事项: "使用jquery的方式获取的对象称为...jquery对象, 使用js的方式获取的对象称为dom(js)对象, 两者的方法和属性不能混用, 使用jquery的方法和属性时,必须保证对象是jquery对象... - jQuery的事件总结 - 事件切换(知道)... <input type="button" value="<em>普通</em><em>按钮</em>

8K1 0

【第3期】前端常用插件、工具类库汇总

函数库 Lodash：https://github.com/lodash/lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。...拥有两个版本，无依赖的独立版和react版本。除了Dom对象，也可监听Canvas内元素的手势。...二维码 jQuery qrcode：https://github.com/jeromeetienne/jquery-qrcode 是一个能够在客户端生成矩阵二维码的jQuery插件，使用它可以很方便的在页面上生成二维码...模版引擎 doT：https://github.com/olado/doT doT模板方便快捷的组织页面DOM，特点是快，小，无依赖其他插件。这也是我在项目中经常会使用的一个模版引擎。...滚动库 iScroll：https://github.com/cubiq/iscroll iScroll是一个高性能、小体积、零依赖、跨平台的js滚动库。它支持PC端、移动端甚至smart TV。

4.3K1 0

「jQuery」基础 - 02

1.2.1 jQuery内容文本值语法 html 注意：html()可识别标签，text()不识别标签。...语法1 注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。...语法2 注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。...jQuery 尺寸、位置操作 jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。 1.4.1....1.4.2. jQuery 位置操作 jQuery的位置操作主要有三个： offset()、position()、scrollTop() / scrollLeft()，具体介绍如下: 语法 offset

2.8K2 0

awesome-javascript-cn

官网 jasmine：简单无 DOM 的 JavaScript 测试框架。官网 qunit：一个易于使用的 JavaScript 单元测试框架。...官网 vanilla-masker：一个纯 JavaScript 实现的输入控制库。官网 Ion.CheckRadio：一个为复选框和单选按钮添加样式的 jQuery 库，支持多种皮肤。...官网 fullcalendar：全尺寸、支持拖放事件的日历（jQuery 插件）。官网 rome：可定制的日期（和时间）选择器。无依赖，可选 UI。...官网 onepage-scroll：创建一个类似 Apple 的单页面滚动网站（iPhone 5S 网站）。官网 iscroll：高性能、轻量、无依赖、兼容多平台的 JavaScript 滚动组件。...官网 stellar.js：让视差滚动变简单。官网 plax：基于 jQuery 的视差库。官网 jparallax：创建可交互视差效果的 jQuery 插件。

10.7K8 0

FullCalendar 日历插件中文说明文档

包括left，center,right左中右三个位置，每个位置都可以对应以下不同的配置：title: 显示当前月份/周/日信息prev: 用于切换到上一月/周/日视图的按钮next: 用于切换到下一月/...周/日视图的按钮prevYear：用于切换到上一年视图的按钮nextYear：用于切换到下一年视图的按钮 {left: 'title',center: '',right: 'today prev,next...查看演示 false buttonIcons 设置header中使用的prev, next等变量对应按钮的样式，只有当theme为true时才有效，如果你调用了jQuery ui样式但又不想使用它的图标样式...事件默认的时间执行长度，如果事件对象没有指定执行多长时间，则默认执行两个小时 120 firstHour 当切换到agenda时，初始滚动条滚动到的时间位置，默认在6点钟的位置 6 minTime 设置显示的时间从几点开始...点击其他的agenda view下的day则为false，jsEvent就是一个普通的javascript事件，包含的是click事件的基础信息。

30.7K9 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭