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


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 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
用JS写一个发布订阅模式
Nov 07 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
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
基于jquery循环map功能的代码
2011/02/26 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
js调用css属性写法
2013/09/21 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jquery移动节点实例
2015/01/14 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python利用tkinter实现屏保
2019/07/30 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
python中np是做什么的
2020/07/21 Python
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
三年大学自我鉴定
2014/01/16 职场文书
销售团队获奖感言
2014/08/14 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
认真学习保证书
2015/02/26 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
庭外和解协议书
2016/03/23 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书