页面回到顶部的三种实现(锚标记,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 相关文章推荐
网页右下角弹出窗体实现代码
Jun 05 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
JavaScript实现区块链
Mar 14 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
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执行sql语句的写法
2009/03/10 PHP
php5.3 废弃函数小结
2010/05/16 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
JS中表单的使用小结
2014/01/11 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
python 文件操作删除某行的实例
2017/09/04 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
什么是抽象
2015/12/13 面试题
计算机专业毕业生自荐信
2013/12/31 职场文书
运动会通讯稿150字
2014/02/15 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
党支部对照检查材料
2014/08/25 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
python实现简单的井字棋
2021/05/26 Python
python获取对象信息的实例详解
2021/07/07 Python