页面回到顶部的三种实现(锚标记,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的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
chosen实现省市区三级联动
Aug 16 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
vue总线机制(bus)知识点详解
May 10 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 第二节 数据类型之数组
2012/04/28 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
Python中的作用域规则详解
2015/01/30 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
python实现udp传输图片功能
2020/03/20 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript