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标签）

赞 (0)

相关推荐

  • JavaScript触发onScroll事件的函数节流详解

    问题描述 常见的网站布局,顶部一个导航栏,我们假设本页面共有四个栏目:分别为A.B.C.D,我们点击A,锚点跳转至A栏目,同时顶部的A按钮高亮:点击B,锚点跳转至B栏目,同时顶部的B按钮高亮:我们在Main组件里面滚动,滚动到B模块时,B按钮高亮.以上是我们经常会在开发中遇到的一个模型.如果是在以前,用jQuery作前端开发的话,实在是太熟悉不过了. 解决方案 主要想谈谈在React组件化开发中的性能优化方法. 我们的页面结构是这样的 <div className={style.main} id

  • JS中完美兼容各大浏览器的scrolltop方法

    1.各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop  : Safari: safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset : Firefox: 火狐等等相对标准些的浏览器就省心多了,直接

  • JavaScript性能优化之函数节流（throttle）与函数去抖（debounce）

    函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用. 函数节流的原理挺简单的,估计大家都想到了,那就是定时器.当我触发一个时间时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行,就这样. 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1.

  • JavaScript函数节流概念与用法实例详解

    JavaScript函数节流概念与用法实例详解

    本文实例讲述了JavaScript函数节流概念与用法.分享给大家供大家参考,具体如下: 最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的 <!DOCTYPE html> <html> <head> <title>Throttle</title> </head> <body> <script type="text

  • javascript的offset、client、scroll使用方法详解

    javascript的offset、client、scroll使用方法详解

     offsetTop 指元素距离上方或上层控件的位置,整型,单位像素. offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素. offsetWidth 指元素控件自身的宽度,整型,单位像素. offsetHeight 指元素控件自身的高度,整型,单位像素. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网

  • 浅谈JavaScript函数节流

    浅谈JavaScript函数节流

    浏览器中某些计算和处理要比其他的昂贵的多.例如,DOM操作比起非DOM交互需要更多的内存和CPU时间.连续尝试进行过多的DOM相关操作可能会导致 浏览器挂起,有时候甚至会崩溃.尤其在IE中使用onresize事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件连续触发.在 onresize事件处理程序内部如果尝试进行DOM操作,其高频率的更改可能会让浏览器崩溃. 函数节流背后的基本思想是,某些代码不可以在没有间断的情况连续重复执行.第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代

  • javascript scrollTop正解使用方法

    javascript scrollTop 获取滚动条相对于其顶部的偏移(如制作自动显示隐藏的"返回顶部"按钮).在实际应用中经常会遇到以下问题:document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为0 1.各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异

  • JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

    JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

    现在网上的回到顶部组件,懂不懂就一大段让人看不懂javascript代码,还各种不兼容.起始这个组件,完全可以自己利用javascript的滚动事件window.onscroll与position:fixed手写.IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在<[CSS]IE6中的position:fixed问题与随滚动条滚动的效果>(点击打开链接)介绍过了. 下面具体说说如何利用JavaScript中的滚动事件window.onscroll实现这个回到顶部组件.

  • JS中setTimeout的巧妙用法前端函数节流

    什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等等事情,那么这时候窗口缩放的时候,有可能连续发多个请求,这并不是我们想要的,或者是说我们常见的鼠标移入移出tab切换效果,有时候连续且移动的很快的时候,会有闪烁的效果,这时候我们就可以使用函数节流来操作.大家都知道,DOM的操作会很消耗或影响性能的,如果是说在窗口缩放的时候,为元素绑定大量的dom操作的话,会引发大量的连续计算,比如

  • js动态添加onload、onresize、onscroll事件(另类方法)

    window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachEvent 或 addEventListener 来添加. 也就是说,它只能这样来(以 onload 为例,下同): 复制代码 代码如下: window.onload = function() { // ... }; 但这有个问题,就是想再为 onload 增加新的事件处理程序时,不能直接为 window.onload 赋值了,否则前面的赋值就会被覆盖了. 可这样做: 复制代码 代

随机推荐