博客
关于我
强烈建议你试试无所不能的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

你可能感兴趣的文章
L104
查看>>
分镜头脚本
查看>>
链表基本操作的实现(转)
查看>>
邮件发送1
查看>>
[转] libcurl异步方式使用总结(附流程图)
查看>>
编译安装LNMP
查看>>
[转]基于display:table的CSS布局
查看>>
crm 02--->讲师页面及逻辑
查看>>
AS3.0 Bitmap类实现图片3D旋转效果
查看>>
Eigen ,MKL和 matlab 矩阵乘法速度比较
查看>>
带三角的面包屑导航栏(新增递增数字)
查看>>
Web应用程序安全与风险
查看>>
codeforces 984 A. Game
查看>>
CSS居中
查看>>
One Person Game(概率+数学)
查看>>
CodeForces 258B Little Elephant and Elections :于1-m中找出七个数,使六个数里面的4和7个数比第七个数严格小:数位dp+dfs...
查看>>
MAP
查看>>
手把手教你测——上网快鸟
查看>>
用javascript获取地址栏参数
查看>>
一起谈.NET技术,你应该知道的15个Silverlight诀窍
查看>>