页面回到顶部的三种实现(锚标记,js)


Posted in Javascript onOctober 01, 2012

本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML(https://3water.com/web/62651.html) 锚标记,也可使用Javascript Scroll (https://3water.com/article/31422.htm) 函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种即可,总之简约最美的,能减少代码就减少代码,能不调用的就别调用,要不是天缘博客的文章都是牛长也不会添加这个功能。

一、使用锚标记返回页面顶部

使用HTML锚标记最简单,就是看起来有点不好看,点击后会在地址栏显示这个锚标记,其它的倒没什么。
页面顶部放置:
<a name="top" id="top"></a>
放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可。
页面底部放置:
<a href="#top" target="_self">返回顶部</a>

二、使用Javascript Scroll函数返回顶部

scrooll函数用来控制滚动条的位置,有两种很简单的实现方式:
方式1:
<a href="javascript:scroll(0,0)">返回顶部</a>
scroll第一个参数是水平位置,第二个参数是垂直位置,比如要想定位在垂直50像素处,改成scroll(0,50)就可以了。
方式2:
本方式是渐进式返回顶部,要好看一些,代码如下:

function pageScroll() { 
window.scrollBy(0,-10); 
scrolldelay = setTimeout('pageScroll()',100); 
} 
<a href="pageScroll();">返回顶部</a>

这样就会动态返回顶部,不过虽然返回到顶部但是代码仍在运行,还需要在pageScroll函数加一句给停止掉。
if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay);

三、使用Onload加上scroll功能实现动态返回顶部

1、首先在网页BODY标签结束之前加上:
<div id="gotop">返回顶部</div>
2、再调用以下JS脚本部分(本脚本非天缘原创,早前来源于Z-BLOG官方论坛上收集,源包未带作者链接,如果原作者看到敬请留言添加):

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');

对Z-BLOG而言,可以放到$(document).ready(function(){....函数中,也可以独立存成一个js文件,比如gotop.js,再通过:
<SCRIPT src="/js/gotop.js" type=text/javascript></SCRIPT>
来调用,当然了位置最好放在“返回顶部”标签的下面,该调用方法已假设路径为JS,其它位置请自行修改。
补充:
上述返回顶部代码都是文字式样的,也可以把文字更换为漂亮一点的图标,另外还有悬浮状的返回顶部代码(就是页面滚动时,返回顶部图标也会跟着跑的那种),需要使用到层等,搞的有点复杂了,本文暂不列出。
Javascript 相关文章推荐
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
简单理解vue中Props属性
Oct 27 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 #Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 #Javascript
js 手机号码合法性验证代码集合
Sep 29 #Javascript
JavaScript模板入门介绍
Sep 26 #Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 #Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 #Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 #Javascript
You might like
php连接mssql数据库的几种方法
2013/02/21 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
php中chdir()函数用法实例
2014/11/13 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
vue实现简单图片上传
2020/06/30 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
生物技术专业毕业生求职信范文
2013/12/14 职场文书
幼儿教育感言
2014/02/05 职场文书
公司运动会策划方案
2014/05/25 职场文书
医学专业自荐信
2014/06/14 职场文书
《鲸》教学反思
2016/02/23 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
Java异常处理try catch的基本用法
2021/12/06 Java/Android