网页中返回顶部代码(多种方法)另附注释说明


Posted in Javascript onApril 24, 2013

网页中返回顶部代码(多种方法)另附注释说明
下面就说下简单的返回顶部效果的代码实现,附注释说明。
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能
方法一:用命名锚点击返回到顶部预设的id为top的元素

<a href="#top" target="_self">返回顶部</a>

方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置)
<a href="javascript:scroll(0,0)">返回顶部</a>

缺点:返回效果是立即的,不符合一般浏览页面的滚动感觉;
静态固定于页面底部,用户不一定看得到。

2. 简单的静态返回顶部,用js模拟滚动效果上滑至顶部

function pageScroll(){ 
//把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数) 
window.scrollBy(0,-100); 
//延时递归调用,模拟滚动向上效果 
scrolldelay = setTimeout('pageScroll()',100); 
//获取scrollTop值,声明了DTD的标准网页取document.documentElement.scrollTop,否则取document.body.scrollTop;因为二者只有一个会生效,另一个就恒为0,所以取和值可以得到网页的真正的scrollTop值 
var sTop=document.documentElement.scrollTop+document.body.scrollTop; 
//判断当页面到达顶部,取消延时代码(否则页面滚动到顶部会无法再向下正常浏览页面) 
if(sTop==0) clearTimeout(scrolldelay); 
}

<a onclick="pageScroll()">返回顶部</a>

缺点:滚动效果不平滑,且在页面很长时点击返回顶部,未向上到达页面顶部无法再正常浏览页面;
同上依旧是静态固定于页面底部,不一定能曝光在用户面前。

3. 动态按需加载返回顶部,css侧边屏幕绝对定位,结合简单jQuery动画实现更好体验

function gotoTop(min_height){ 
//预定义返回顶部的html代码,它的css样式默认为不显示 
var gotoTop_html = '<div id="gotoTop">返回顶部</div>'; 
//将返回顶部的html代码插入页面上id为page的元素的末尾 
$("#page").append(gotoTop_html); 
$("#gotoTop").click(//定义返回顶部点击向上滚动的动画 
function(){$('html,body').animate({scrollTop:0},700); 
}).hover(//为返回顶部增加鼠标进入的反馈效果,用添加删除css类实现 
function(){$(this).addClass("hover");}, 
function(){$(this).removeClass("hover"); 
}); 
//获取页面的最小高度,无传入值则默认为600像素 
min_height ? min_height = min_height : min_height = 600; 
//为窗口的scroll事件绑定处理函数 
$(window).scroll(function(){ 
//获取窗口的滚动条的垂直位置 
var s = $(window).scrollTop(); 
//当窗口的滚动条的垂直位置大于页面的最小高度时,让返回顶部元素渐现,否则渐隐 
if( s > min_height){ 
$("#gotoTop").fadeIn(100); 
}else{ 
$("#gotoTop").fadeOut(200); 
}; 
}); 
}; 
gotoTop();

css样式代码:
/*默认样式,主要是position:fixed实现屏幕绝对定位*/ 
#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:pointer;margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px solid #e0e0e0;background:#fff;} 
/*用CSS表达式(expression)来实现ie6下position:fixed效果*/ 
#gotoTop{_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px")} 
/*鼠标进入的反馈效果*/ 
#gotoTop.hover{background:#5CB542;color:#fff;text-decoration:none;}

这种方法判断页面高度按需将“返回顶部”展示给用户,用css样式实现了屏幕绝对定位,借助jQuery实现了更好用平滑的滚动效果。进一步考虑如果用户设置了浏览器禁用js,那么我们可以将第三方案结合第一方案方法一,禁用js后第三方案将不被用户所见,未禁用的话我们在js代码中再加上一句隐藏第一方案。

总之,长页面还是要尽量避免的,不可避免的情况下,加上“返回顶部”功能可能会带给用户相对好一点的体验。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
微信小程序switch开关选择器使用详解
Jan 31 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 #Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 #Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 #Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 #Javascript
查看图片(前进后退)功能实现js代码
Apr 24 #Javascript
jQuery判断密码强度实现思路及代码
Apr 24 #Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 #Javascript
You might like
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
Cannot modify header information错误解决方法
2008/10/08 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
php笔记之:AOP的应用
2013/04/24 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php格式文件打开的四种方法
2018/02/24 PHP
JS 时间显示效果代码
2009/08/23 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
零基础学python应该从哪里入手
2020/08/11 Python
python实现移动木板小游戏
2020/10/09 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
假面舞会策划方案
2014/05/29 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
Win11开始菜单添加休眠选项
2022/04/19 数码科技