页面回到顶部的三种实现(锚标记,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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
js实现简单的随机点名器
Sep 17 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用header函数实现301跳转代码实例
2013/11/25 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
英国高街电视:High Street TV
2018/05/22 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
骨干教师培训感言
2014/01/16 职场文书
元旦联欢会感言
2014/03/04 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
承诺书范本
2015/01/21 职场文书
业务员岗位职责范本
2015/04/03 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
Python基础之数据结构详解
2021/04/28 Python
Pytest中conftest.py的用法
2021/06/27 Python
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
python自动化测试之Selenium详解
2022/03/13 Python