js浏览器回到顶部方法_js 返回顶部按钮
要求:当鼠标从顶部滚动后,显示返回顶部按钮,点击按钮,页面平滑滚动到顶部,按钮隐藏。
1.css
#scrollTop{position:fixed;bottom:20px;right:20px;height:0px;width:45px;line-height:45px;text-align:center;background-color:rgba(0,0,0,.7);color:#fff;font-weight:600;border-radius:45%;font-size:13px;transition:.5s all;
}
2.js
varscrolltop=document.getElementById("scrollTop");
scrolltop.οnclick= function(){//alert("111");
//document.scrollingElement.scrollTop = 0;
//window.scrollTo(0,0);
window.scrollTo({ top:0, behavior:"smooth"});
}
window.οnscrοll= function(){varscrollTop1=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;if(scrollTop1> 0) {//scrolltop.style.width = 45 + 'px';
scrolltop.style.height= 45 + 'px';
}else{//scrolltop.style.width = 0 + 'px';
scrolltop.style.height= 0 + 'px';
}
}
解释:
1.position : fixed; 以浏览器窗口绝对定位
2. 返回顶部方法
① document.scrollingElement.scrollTop = 0 ; //垂直滚动到顶部
② window.scrollTop(0,0) //垂直滚动到顶部
③ window.scrollTop(options);
top: 相当于y轴坐标;
left: 相当于x轴坐标;
behavior:类型string,表示滚动行为,支持smooth(平滑滚动),instant(瞬间滚动), 默认值是auto,等同于instant
window.scrollTo({top:1000,
behavior: "smooth"});
3. 当滚动条滚动的距离大于零时,设置按钮高度,否则高度为零(不显示)
获取scrollTop:
①各浏览器下 scrollTop的差异
IE6/7/8:
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop;
Safari:
safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;
②完美获取
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
通过这句赋值就能在任何情况下获得scrollTop 值。
window.pageYOffset (Safari) 被放置在 || 的中间位置。
因为当 数字0 与 undefine 进行 或运算时,系统默认返回最后一个值。即或运算中 0 || undefine ;返回的是underfine。
当页面滚动条刚好在最顶端,即scrollTop值为 0 时。 IE 下 window.pageYOffset (Safari) 返回为 undefine ,此时将window.pageYOffset (Safari) 放在或运算最后面时, var scrollTop= 0 || 0 || undefine =underfine ,这样用在接下去的运算就会报错咯。
而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine. 可以安全使用..
所以 window.pageYOffset 要放中间 如下:
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
js浏览器回到顶部方法_js 返回顶部按钮相关推荐
- js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)
写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [ ...
- html js 回到顶部,简单的返回顶部的js代码
返回顶部js代码 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...
- js,jq,锚点 分别实现返回顶部
效果预览: 锚点实现: 锚点效果生硬,用户体验差,但没兼容性问题 <!DOCTYPE html> <html><head><meta charset=&quo ...
- 网页中返回顶部代码(多种方法)另附注释说明
下面就说下简单的返回顶部效果的代码实现,附注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部 下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返 ...
- 页面返回顶部(方法比较)
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 h ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...
- 返回顶部按钮 js普通函数版/class构造函数版/JQ版
本文的返回顶部 有两种版本:①js普通函数版: ②class构造函数版:③JQuery版 话不多说直接上代码!(其中样式较简陋,引用时可以自己根据需要来修改样式) ①JS普通函数 封装好的返回顶部 版 ...
- JS实现页面返回顶部的匀加速运动
JS实现页面返回顶部的匀加速运动 //返回顶部//声明返回顶部的函数function returnTop(){var timer;clearInterval(timer);timer = setInt ...
- 简单返回顶部代码及注释说明(转)
最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不够好.最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块.当然这就需要结合" ...
最新文章
- AngularJS组件 - ngTags
- Python面向对象编程:入门类和对象
- 鼠标跟随flash代码_FLASH如何制作密码锁功能(AS3)
- 数据挖掘导论读书笔记4--其他分类技术
- 央行变相降准祭出又一新手段 引发同业套利之忧
- Visual Studio将原生支持WSL 2
- Spring MVC中使用 Swagger2 构建Restful API
- linux 编辑器_Linux的vi编辑器详细总结
- python读取pdf文件 pdfplumber_Python pdfprumber用于PDF表提取,pythonpdfplumber,表格
- Google作图工具- SketchUp
- 鱼C论坛_VIP二号光盘
- 【转】《风雨哈佛路》观后感
- 使用matlab对路径的字符串进行分割和合成
- Java开发工程师项目经验以及个人介绍实例
- 【3D游戏建模全流程教学】使用3dsmax与UE4制作世界末日地铁场景
- 计算机组成原理中总线包括,计算机组成原理复习题
- 怎样设定计算机屏幕锁定时间,电脑怎么调锁屏时间
- neo4j 最短路径 java_Neo4j查询节点间最短路径
- uiautomatorviewer详解
- NLP工具——doccano标注系统自动标注功能使用