页面回到顶部的三种实现(锚标记,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.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 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+xml编程之SimpleXML的应用实例
2015/01/24 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
Js 中debug方式
2010/02/07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
基于Vue过渡状态实例讲解
2017/09/14 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
自我鉴定范文300字
2013/10/01 职场文书
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
趣味活动策划方案
2014/02/08 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
安全负责人任命书
2014/06/06 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
修辞手法有哪些?
2019/08/29 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
PyQt5实现多张图片显示并滚动
2021/06/11 Python
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技
CentOS MySql8 远程连接实战
2022/04/19 MySQL