我要返回顶部
我觉得一个网站最不可少的小功能就是返回顶部了吧,尤其是那些长的要命,拉都拉不到尽头的,简直丧心病狂,如果没有返回顶部的按钮的话,鬼愿意原路拉回去,直接关掉走人。所以一个返回顶部的按钮还是需要的,当然,返回顶部也可以做出很多花样,本文只讨论如何返回,不管具体的外观样式,那都是后话。
以下是一些方法:
1.
<a href='#'>返回顶部</a>
ok,搞定,是不是觉得很坑爹,但我刚开始接触的时候就是用这个方法的,简单暴力直接,就是硬生生的直接跳回去,不好看,没有美感,而且直接这样不太提倡,如果加个target属性的话,说不定就直接新开一个页面了,所以这个方法直接无视。
2.
<a name="top" id="top"></a> //放到页面顶部
<a href="#top" target="_self">返回顶部</a>
这个方法可以看作是第一个方法的简单升级版本,是利用锚标记实现的,不过还是那个问题,太干脆不好玩,用户有时候可不喜欢直接接受结果,适当有个过程还是更好的。所以作为一个有追求有理想有抱负的程序员怎么能这么随便呢,所以这个方法还是直接pass。
3.
这个方法是用Javascript Scroll函数实现的,scrollBy(x,y),是滚多少,而scroll(x,y)是滚到,所以你也可以直接一句scroll(0,0)就解决了,但是还是那个问题,没有过程,不够优雅。所以用scrollBy(x,y)再加个定时器就实现了,看下面:
function pageScroll() {
window.scrollBy(0,-10);
scrolldelay = setTimeout('pageScroll()',100);
}
滚到0定时器还在继续,所以需要做个判断。
if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay);
<a href="pageScroll();">返回顶部</a>
完美解决,像恋爱一样,循序渐进,非常好。
4.
第三个方法虽然有过程,但是还是不够好,为什么,因为它是匀速的,匀速不如变速好看,开始快,后慢,这比较贴近实际,所以改良一下,新代码如下:
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
// 滚动条到页面顶部的水平距离
var x = Math.max(x1, Math.max(x2, x3));
// 滚动条到页面顶部的垂直距离
var y = Math.max(y1, Math.max(y2, y3));
// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
// 如果距离不为零, 继续调用迭代本函数
if(x > 0 || y > 0) {
var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
window.setTimeout(invokeFunction, time);
}
}
5.
最后再来个用jquery的,简单,效果好,代码如下:
$(document.body).animate({'scrollTop':0},500) || $(document.documentElement).animate({'scrollTop':0},500);
简直帅的没朋友。
总结:返回顶部其实原理都一样,具体的实现过程可能不太一样,实际当中还要再做一些优化,提高用户体验,其实别看这样一个简单的功能,实现起来也需要认真对待。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章