页面回到顶部的三种实现(锚标记,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拖拽组件
Jul 28 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
webpack开发跨域问题解决办法
Aug 03 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 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验证码类(分享)
2013/08/06 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
Python中__name__的使用实例
2015/04/14 Python
利用Python获取操作系统信息实例
2016/09/02 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Python关于反射的实例代码分享
2020/02/20 Python
python用什么编辑器进行项目开发
2020/06/17 Python
在keras里实现自定义上采样层
2020/06/28 Python
Keras loss函数剖析
2020/07/06 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
不遵守课堂纪律的检讨书
2014/09/24 职场文书
民主评议党员总结
2014/10/20 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
python实现双链表
2022/05/25 Python