回到顶部的几种写法实现
来源:互联网 发布:产品跟踪软件 编辑:程序博客网 时间:2024/06/05 19:38
1.锚点
使用锚点链接是一种简单的返回顶部的功能实现。在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置。
<body style="height:2000px;"> <div id="topAnchor"></div> <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a></body>
2.scrollTop
<body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> <script> test.onclick = function(){ document.body.scrollTop = document.documentElement.scrollTop = 0; } </script></body>
3.scrollTo(x,y)
scrollTo(x,y)方法滚动当前window中显示的文档,让文档中由坐标x和y指定的点位于显示区域的左上角,设置scrollTo(0,0)可以实现回到顶部的效果。
<body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> <script> test.onclick = function(){ scrollTo(0,0); } </script></body>
4.scrollBy(x,y)
scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量,只要把当前页面的滚动长度作为参数,逆向滚动,则可以实现回到顶部的效果。
<body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> <script> test.onclick = function(){ var top = document.body.scrollTop || document.documentElement.scrollTop scrollBy(0,-top); } </script></body>
5.scrollIntoView()
Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域。
该方法可以接受一个布尔值作为参数。如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。如果没有提供该参数,默认为true。
使用该方法的原理与使用锚点的原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果。
<body style="height:2000px;"> <div id="target"></div> <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> <script> test.onclick = function(){ target.scrollIntoView(); } </script></body>
参考文章:http://www.cnblogs.com/xiaohuochai/p/5007282.html
http://www.cnblogs.com/xiaohuochai/p/5831640.html#anchor4
http://www.cnblogs.com/xiaohuochai/archive/2016/09/03/5836179.html
- 回到顶部的几种写法实现
- 回到顶部的几种写法
- 5种回到顶部的写法从实现到增强
- 5种回到顶部的写法
- 基于JS实现回到页面顶部的五种写法(从实现到增强)
- 页面回到顶部的三种实现
- 回到顶部的实现方式
- js 回到顶部的实现
- JavaScript实现回到顶部/底部的两种方法
- JavaScript回到顶部的滑动效果实现
- javascript 回到顶部的效果实现
- 页面回到顶部的实现及原理
- jquery实现简单的回到顶部
- 实现页面的回到顶部功能
- JQuery实现回到顶部
- jquery 实现回到顶部
- 实现回到顶部功能
- 回到顶部功能实现
- mysql workbench闪退 解决方法
- hdu 2023 求平均成绩
- namespace和里面的类不能同名
- rabbitMQ第二篇:java简单的实现RabbitMQ
- C/C++改变终端输出字体的颜色(Linux)
- 回到顶部的几种写法实现
- GDB 与GDBserver交叉调试的总结
- 图片压缩算法机制—近微信压缩机制的Luban
- 控制反转(IOC)、依赖注入(DI)之通过构造函数注入简单属性
- 一张图说明电商架构
- 如何创建不可变(Immutable)的Java类或对象
- 网络设备之集线器
- 安徽省淮北市谷歌卫星地图下载
- Window下安装RabbitMQ