页面回到顶部的三种实现(锚标记,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 相关文章推荐
JQuery 文本框使用小结
May 22 Javascript
js 幻灯片的实现
Dec 06 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
php时间计算相关问题小结
2016/05/09 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
js的对象与函数详解
2019/01/21 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
Python设计密码强度校验程序
2020/07/30 Python
python 简单的调用有道翻译
2020/11/25 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
房地产公司见习自我鉴定
2014/04/28 职场文书
员工年终自我评价
2014/09/14 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP