当前位置:首页 > javascript > 正文内容

JavaScript实现回到顶部

自由小鸟7年前 (2018-06-27)javascript3067
#top{
display: none;
position: fixed;
left: 90%;
bottom: 40px;
height:60px;
width: 60px;
background: rgba(0,0,0,0.5);
background-size:100% auto;
border-radius: 5px;
text-align: center;
}
#top i{
border-width:14px 10px;
border-color:transparent transparent #000 transparent;
border-style: dashed dashed solid dashed;
}
window.onload=function(){
oTop=document.getElementById('top');
var time1=null;
var isTop=null;
oTop.onclick=function(){
//设置定时器
time1=setInterval(function(){
var osTop = document.body.scrollTop||document.documentElement.scrollTop;
//ceil向上取整,floor向下取整
var speed=Math.ceil(osTop/2);
document.body.scrollTop=document.documentElement.scrollTop=osTop-speed;
if(osTop<=0){
clearInterval(time1);
}
isTop=true;
},100);
}
//页面滚动自动触发:
window.onscroll = function(){
//获取页面可视区高度和滚动高度
var osTop = document.body.scrollTop||document.documentElement.scrollTop;
//这两个获取滚动的方法可以兼容多种浏览器
var clientHeight = document.documentElement.clientHeight;
//对回到顶部的隐藏和显示,在css中一开始可以设置为隐藏
if (osTop>clientHeight) {
oTop.style.display = "block"
}
else{
oTop.style.display = "none"
}
if (!isTop) {
clearInterval(time1);
}
isTop = false;
}

}


版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://www.webge.net/?id=12

“JavaScript实现回到顶部” 的相关文章

DOM事件

1,事件级别    DOM0-dom.onclick=fun    DOM2-dom.addEventListener('click',fun,false)    ...

数组有哪些原生方法

赋值方法:pop 和 push   pop // 删除数组最后一个元素,返回被删除的元素push // 在数组尾部插入1-N个元素,返回操作后数组的lengthshift     //  删除数组第一个元素,返回被删除的元素uns...

event-loop

event-loop

如果知道js运行机制,在工作中会帮助我们更好的理解和编写代码,也知道为什么js是单线程js为什么是单线程原因,就是为了避免DOM渲染的冲突异步是一种“无奈”的解决方案,虽然有很多问题,如下:1,没按照书写方式执行,可读性差2,callback中不容易模块化什么是event-loop1,同步代码,直接...

js 深浅拷贝

对象浅拷贝Object.assign,也可以做到浅拷 slice let obj=[11,22,33,44,['aa','bb','cc']] let aaa=obj.slice(0); aaa[4][0]='ccc' c...

防抖和节流

如果我在一个时间内只执行一次,最好用防抖,如果只是想在执行时,设置一下间隔时间那么用节流 防抖是在一个时间内只能执行一次,如果频繁操作就会清除重新开始计算执行,我设置的时间内整个过程中只会执行一次/* 函数的防抖 debounce,不是某个事件触发就去执行函数,而是在指定的时间间隔内执行...

js 宏任务和微任务

js 宏任务和微任务

首先讲粗略说一下宏任务和微任务宏任务:script(整体代码), setTimeout, setInterval微任务包括: Promise, MutationObserver(html5新特性),process.nextTick。 代码从上至下在执行过程,遇到Promise,new Promi...