页面回到顶部的三种实现(锚标记,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 相关文章推荐
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 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输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
python中实现词云图的示例
2020/12/19 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
会计专业大学生职业生涯规划书
2014/02/11 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
迎新生标语大全
2014/10/06 职场文书
党支部四风整改方案
2014/10/25 职场文书
宇宙与人观后感
2015/06/05 职场文书
解约证明模板
2015/06/19 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python