页面回到顶部的三种实现(锚标记,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编程开发中的五个实用小技巧
Jul 22 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
javascript中的delete使用详解
Apr 11 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP $_FILES函数详解
2011/03/09 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
详解vue slot插槽的使用方法
2017/06/13 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
浅谈js中的bind
2019/03/18 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
python实现从web抓取文档的方法
2014/09/26 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
python实现图像拼接
2020/03/05 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
论群众路线学习笔记
2014/11/06 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
用python自动生成日历
2021/04/24 Python
关于python类SortedList详解
2021/09/04 Python
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技