博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
页面回到顶部的几种实现方式
阅读量:5781 次
发布时间:2019-06-18

本文共 851 字,大约阅读时间需要 2 分钟。

hot3.png

一·锚点标记返回
优点:简单
确定:地址栏显示锚标记
设置锚点:<a name="top" id="top"></a>
返回链接:<a href="#top" target="_self">返回顶部</a>
二·使用javascript scroll函数返回顶部
两种实现方式
1·<a href="javascript:scroll(0,0)">返回顶部</a>
想要定位到其他位置,直接修改scroll参数即可
2·渐进跳回
function pageScroll() {window.scrollBy(0,-10);scrolldelay = setTimeout('pageScroll()',100);}返回顶部if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay);
三·其他(来自网络)
BackTop=function(btnId){var btn=document.getElementById(btnId);var d=document.documentElement;window.onscroll=set;btn.onclick=function (){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);},10);};function set(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

转载于:https://my.oschina.net/xinyuan6009/blog/172582

你可能感兴趣的文章
Spring Security OAuth 实现OAuth 2.0 授权
查看>>
linux文件及简单命令学习
查看>>
dubbo源码分析-架构
查看>>
新 Terraform 提供商: Oracle OCI, Brightbox, RightScale
查看>>
6套毕业设计PPT模板拯救你的毕业答辩
查看>>
IT兄弟连 JavaWeb教程 JSP与Servlet的联系
查看>>
Windows phone 8 学习笔记
查看>>
linux并发连接数:Linux下高并发socket最大连接数所受的各种限制
查看>>
洛谷——P2176 [USACO14FEB]路障Roadblock
查看>>
详解区块链中EOS的作用。
查看>>
我的友情链接
查看>>
mysql-error 1236
查看>>
sshd_config设置参数笔记
查看>>
循序渐进Docker(一)docker简介、安装及docker image管理
查看>>
jsp页面修改后浏览器中不生效
查看>>
大恶人吉日嘎拉之走火入魔闭门造车之.NET疯狂架构经验分享系列之(四)高效的后台权限判断处理...
查看>>
Oracle HRMS,PeopleSoft HR,SAP HR区别
查看>>
信号量实现进程同步
查看>>
Spring4-自动装配Beans-通过构造函数参数的数据类型按属性自动装配Bean
查看>>
win10.64位wnmp-nginx1.14.0 + PHP 5. 6.36 + MySQL 5.5.59 环境配置搭建 结合Thinkphp3.2.3
查看>>