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

最新推荐文章于 2022-12-03 20:00:00 发布
最新推荐文章于 2022-12-03 20:00:00 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： react native与跨平台flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_31333625/article/details/53814262
版权
本文介绍了网页中常见的一种交互设计：当页面滚动到一定位置时，显示返回顶部按钮。通过监听window.onscroll事件，可以实现这一功能。通过编写相关代码，可以在用户滚动页面时控制返回顶部按钮的可见性。
摘要由CSDN通过智能技术生成

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

那么，如何控制“回到顶部”按钮的显示或隐藏呢？其实我们只需要实现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"; 
} 
} 
天崩地裂金刚不坏
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
js隐藏与显示回到顶部按钮及[removed]事件应用
12-11
现在大多数网站都会添加这种功能：当滚动条滚动到页面的下方时，页面的右下角会显示出来一个“回到顶部”的按钮或连接，点击该按钮后页面会跳转到顶部，或某一个适合查看内容的位置。 那么，如何控制“回到顶部”按钮的显示或隐藏呢？其实我们只需要实现[removed] 事件即可，代码如下： 代码如下: [removed] = function () { if (document.documentElement.scrollTop + document.body.scrollTop > 100) { document.getElementById(“scrollto”).style.
js隐藏与显示回到顶部按钮
sinat_16664531的专栏
12-12 286
js隐藏与显示回到顶部按钮 window.onscroll = function () { if (document.documentElement.scrollTop + document.body.scrollTop > 100) { document.getElementById("scrollto").style.display = "block"; } else { document.getElementById("scrollto
点击返回顶部（可显示隐藏）
2201_75407865的博客
12-03 558
使用定时器，每隔一段时间减小一次scrollTop的值（不能直接改变scrollTop，要改变document.documentElement.scrollTop ，或者document.body.scrollTop值，考虑到兼容性直接全改），当该值≤0时即页面移动到了最顶部时停止。 添加一个判断，当页面到了一定位置时，即document.documentElement.scrollTop ，或者document.body.scrollTop的值大于特定值时，display属性改为block，否则none
关于javascript的window.onscroll方法
weixin_30751947的博客
11-09 379
---恢复内容开始--- 今天在学习javascript的过程中被onscroll这个东西堵了一下午.心情极度郁闷. 在高度较大的网页中,我们通常会加一个返回顶部的按钮,方便用户操作. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&g...
纯JS实现页面滚动至顶部并自动显示或隐藏
纪风夜影
06-22 6042
**博主最近在试着写一些简单的JS组件，一方面锻炼自己的JS功底，另一方面也为将来JS组件复用打好基础** 我们在浏览网页时常常看到这样的JS组件 这个是CSDN博客的返回顶部按钮，这种按钮是瞬间回到页面顶部，到页面顶部后的消失也是立马消失，而我们今天要写的是逐步返回至顶部，并逐步消失，在页面往下拉后，按钮也是逐步出现。
快速回到顶部......zip
08-21
通过`window.onscroll`事件监听滚动条位置，当页面向下滚动超过100像素时，显示回到顶部按钮；反之则隐藏。点击按钮时，`addEventListener`监听点击事件，并调用`window.scrollTo`方法，利用`behavior: 'smooth'`...
JS 滚动事件[removed]与position：fixed写兼容IE6的回到顶部组件
10-21
在本文中，我们将深入探讨如何使用JavaScript的滚动事件`window.onscroll`和CSS的`position: fixed`属性来创建一个兼容IE6的回到顶部组件。这个组件在用户滚动页面时，会在页面底部显示一个返回顶部的按钮，当用户...
一个简单的弹性返回顶部JS代码实现介绍
10-27
`window.onscroll`事件监听器用于在用户滚动页面时显示或隐藏按钮，如果页面顶部距离超过0，则显示按钮，否则隐藏。 `obj.onclick`事件处理程序定义了点击按钮时执行的函数。它使用`setInterval`创建了一个定时器`...
回到网页顶部JS代码.rar
06-29
总的来说，"回到网页顶部JS代码"这个压缩包提供了一个基本的实现方案，通过JavaScript监听滚动事件和触发点击事件，实现页面的返回顶部功能。在实际项目中，开发者可以基于这个基础进行优化，增加更多的交互细节和...
【JavaScript源代码】JavaScript实现返回顶部按钮案例.docx
12-29
JavaScript 实现返回顶部按钮是一种常见的网页交互功能，它允许用户快速返回页面的顶部，提高用户体验。下面我们将详细探讨如何使用JavaScript来实现这个功能。 首先，我们需要创建返回顶部按钮的HTML结构，通常是...
js代码实现回到顶部的效果
qq_41445106的博客
07-06 1337
滚动条滚动距离小于300px时按钮不显示，大于300px时回到顶部按钮显示，点击按钮回到顶部 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 给body设置高度，...
js中的onscroll的用法
热门推荐
kbx8916的博客
11-15 2万+
onscroll是在元素轴滚动时触发的。 eg:如是在div滚动条滚动时触发的。 eg:window.onscroll或document.onscroll是在浏览器滚动条滚动时触发的。 利用onscroll可以用来显示“回到顶部“这一功能，是在浏览器滚动到一定程度时，显示"回到顶部"; 无标题文档 #div1 { background-color:
返回顶部隐藏显示的控制代码
dly120219891208的专栏
07-28 1571
js $(function() { $(window).scroll(function() { if ($(this).scrollTop() > 1) { //当window的scrolltop距离大于1时，go to top按钮淡出，反之淡入 $("#gotoTop").fadeIn(); } else {
window.onload()方法和window.onscroll()方法
weixin_46370867的博客
11-17 6802
也许你想成为太阳，可你却只是一颗星辰；也许你想成为大树，可你却是一棵小草。于是，你有些自卑。其实，你和别人一样，也是一片风景：做不了太阳，就做星辰，在自己的星座发光发热；做不了大树，就做小草，以自己的绿色装点希望…… 下面是对window对象中 window.onload()方法和window.onscroll()方法的整理，希望可以帮助到有需要的小伙伴 JavaScript window对象 BOM中最核心的对象就是Window对象 window对象是浏览器窗口中的顶级(全局)对象 window对象的属性
JavaScript学习DAY9
weixin_43606194的博客
08-16 186
DAY9 一、浏览器的 onscroll 事件 这个 onscroll 事件是当浏览器的滚动条滚动的时候触发，或者鼠标滚轮滚动的时候出发 window.onscroll = function () { console.log('浏览器滚动了') } 注意：前提是页面的高度要超过浏览器的可视窗口才可以 scrollTop 获取滚动的距离 滚动距离 document 文档对象 获取的是页面向上滚动的距离 两种方式 document.body.scrollTop 没有<!DOCTYP
window.onscroll = function(){}事件
u014465355的博客
03-11 1532
如果一个页面出现多个window.onscroll = function(){}事件，那麽后果是只有最后一个正常运行 解决的办法是： 方法一： window.onscroll=function(){     alert('first scroll'); }   var oldMethod = window.onscroll; if(typeof oldMethod == 'func
多个window.onscroll的解决方法
lz305263的博客
12-29 3695
方法1： window.onscroll=function(){     alert('first scroll'); } var oldMethod = window.onscroll; if(typeof oldMethod == 'function'){     window.onscroll = function(){         oldMethod.call(this)
window.onscroll无效问题
friendan的专栏
06-11 1万+
我的环境： | Grails Version: 3.1.4 | Groovy Version: 2.4.6 | JVM Version: 1.7.0_80 ------------------------------------------------------------------------------ --------------------------------------
优化一下这段代码//1、获取元素 var one = document.querySelector('.one') var two = document.querySelector('.two') //2、绑定滚动事件 window.onscroll = function () { //2-1，获取浏览器卷去的高度 var height = document.documentElement.scrollTop || document.body.scrollTop //2-2，判断卷去的高度 if (height >= 300) { //显示 two.style.display = 'block' } else { //隐藏 two.style.display = 'none' } } //3，绑定点击事件 two.onclick = function () { //3-1，让页面滚动回到顶部 window.scrollTo({ top: 0, behavior: 'smooth' }) }
最新发布
06-03
可以进行如下优化： 1. 将获取元素的代码封装成一个函数，方便复用； 2. 采用事件监听的方式代替直接给window对象绑定事件，避免冲突和覆盖； 3. 在滚动事件中，使用节流或防抖函数进行优化，避免事件频繁触发； 4. 在滚动事件中，判断当前滚动位置是否已经到达目标位置，如果是，就不再执行后面的代码； 5. 使用ES6的语法简化代码。 优化后的代码如下： ```javascript // 1、封装获取元素的函数 const $ = selector => document.querySelector(selector) // 2、使用事件监听代替直接绑定事件 window.addEventListener('scroll', throttle(() => { // 2-1、获取浏览器卷去的高度 const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 2-2、判断卷去的高度 if (scrollTop >= 300) { // 显示 $('.two').style.display = 'block' } else { // 隐藏 $('.two').style.display = 'none' } }), 300) // 3、给回到顶部按钮绑定点击事件 $('.two').addEventListener('click', () => { // 3-1、让页面滚动回到顶部 window.scrollTo({ top: 0, behavior: 'smooth' }) }) // 节流函数 function throttle(func, wait) { let timer = null return function () { if (!timer) { timer = setTimeout(() => { func.apply(this, arguments) timer = null }, wait) } } } ``` 注：上述代码使用了节流函数进行优化，每隔300毫秒才会执行一次滚动事件的回调函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天崩地裂金刚不坏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值