×

返回顶部

简单的网页返回顶部代码

小虎 小虎 发表于2012-09-21 00:09:20 浏览1937 评论48

48人参与发表评论

返回顶部的跳转链接是网页设计中不可或缺的一个小细节。它的目的是帮助访问者快速回到页面顶部,免除了不断拖动滚动条或者不停转动鼠标滚轮的麻烦,提高了浏览网页的效率。

最近博客在首页多增加了几条日志,同时侧栏也增加几个栏目,使博客首页页面内容丰富,最后页面明显过长。一般用户访问博客的习惯是从顶部拉到底部,由于页面长度过长而不会再拉回顶部。这样最直接的后果就是关闭页面,使用户体验自然不够好。特别是在日志页,由于留言过多zblog作者并没有使留言分页显示,当留言达到几百条时访客在看完每条留言后再返回网页头部是件挺困难的事。最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块。当然这就需要结合“返回顶部”功能来取得更好的体验了。当然一般情况下首先还是要避免页面过长,内容薄弱关联性不够的跳出率会很高。

 

最终的解决方法是在每个过长的页面底部加入返回顶部代码,下面小虎博客收藏了几个简单的返回顶部效果的代码,并附注释说明:

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能

方法一:用命名锚点击返回到顶部预设的id为top的元素

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

方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置)

html代码
<href="javascript:scroll(0,0)">返回顶部</a>

 缺点:返回效果是立即的,不符合一般浏览页面的滚动感觉;

         静态固定于页面底部,用户不一定看得到。

 

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

 
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);
}
 
html代码
<onclick="pageScroll()">返回顶部</a>

缺点:滚动效果不平滑,且在页面很长时点击返回顶部,未向上到达页面顶部无法再正常浏览页面;

        同上依旧是静态固定于页面底部,不一定能曝光在用户面前。

 

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

 
js代码
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;}
 

这种方法较复杂,不建议新手使用此方法。

总之,长页面还是要尽量避免的,不可避免的情况下,加上“返回顶部”功能可能会带给用户相对好一点的体验。目前小虎博客使用的第2种使用js平滑至顶部,演示效果:http://www.huhen.com首页右下角“返回顶部”链接。

群贤毕至

访客
蒋子杰 蒋子杰2014-10-17 13:49:34 | 回复 一针见血
蒙艳强博客 蒙艳强博客2014-10-17 09:48:09 | 回复 学习了
蒙艳强博客 蒙艳强博客2014-10-17 09:47:26 | 回复 很实用的帮助帖,当前的个人博客内容全部偏向了seo,但是最基础的网站布局优化一点没有,对于屌丝来说一个好的网站布局好的网站设计无疑会一劳永逸的,毕竟你在多的seo也要在稳定的基础上开展工作。
情侣装专卖店 情侣装专卖店2014-09-24 23:51:25 | 回复 好东东 留下了 学习了了www.qinglu8.com
启航资源网 启航资源网2014-06-17 15:17:01 | 回复 不错支持下
启航资源网 启航资源网2014-06-17 15:16:31 | 回复 学习了
俄罗斯轮盘娱乐城 俄罗斯轮盘娱乐城2014-03-06 16:42:32 | 回复 详细
广州捷宇塑料 广州捷宇塑料2013-10-28 14:05:02 | 回复 很详细,很清楚。
深圳拍婚纱照哪里好 深圳拍婚纱照哪里好2013-08-19 14:20:45 | 回复 学习了~支持下
地源热泵技术 地源热泵技术2013-01-14 12:06:56 | 回复 一般情况下首先还是要避免页面过长,内容薄弱关联性不够的跳出率会很高。
中央空调系统 中央空调系统2013-01-12 14:03:56 | 回复 直接导航到本页的分类命名锚块
铅酸蓄电池行业分析 铅酸蓄电池行业分析2013-01-09 17:53:14 | 回复 来个小脚印
铅酸蓄电池行业分析 铅酸蓄电池行业分析2013-01-09 15:43:55 | 回复 1月9日博主,要过年了哟!
健康使者 健康使者2012-12-28 09:59:18 | 回复 很好,正好需要这样的
ITihlinux爱开源 ITihlinux爱开源2012-12-25 01:13:21 | 回复 学习了
admin admin2012-11-13 21:29:06 | 回复 我没屏蔽你的关键词。你发的评论频率太高了,被系统屏蔽进入审核状态。已经全部通过了。
茅草瓦 茅草瓦2012-11-13 13:45:41 | 回复 小虎,怎么我的评论进入审核过程啊? 本人虽然没有个人博客,但是做过不少企业站优化,也热衷于SOE,希望能个小虎多多交流啊。我的关键词就是茅草瓦、仿茅草、仿真茅草瓦、仿真茅草、仿稻草。无外乎这些,只要是跟茅草、稻草相关的都是我的,给通过以下啊!
茅草瓦 茅草瓦2012-11-13 13:44:10 | 回复 如果 href=&quot;#&quot; 意思就是返回首页的吗? 这个链接用于网站首页大多链接对百度排名有没有用啊?上次研究了一个网站首页50%的超链接代码 href=“”里面都是一个“#”但是他的站排名超好,跟他有关没关系的只要是沾边的关键词都排首页。四十多个关键词都在排首页吧。忒强悍.
app订制 app订制2012-11-12 18:05:13 | 回复 很不错……学习……
寮步婚纱摄影 寮步婚纱摄影2012-10-28 13:41:53 | 回复 文章不错!支持给力!!
admin admin2012-10-25 15:01:14 | 回复 对于有评论而且网页下拉很长的网站是有必要的。
塔防游戏 塔防游戏2012-10-25 12:05:01 | 回复 回到顶部,貌似我的站都不怎么需要用到!
好看电影网 好看电影网2012-10-23 14:12:16 | 回复 谢谢分享,学习了
东莞喜雁影像中心 东莞喜雁影像中心2012-10-19 11:15:10 | 回复 写的不错哦
初学seo 初学seo2012-09-29 16:14:27 | 回复 不错,学习学习
小榄婚纱摄影 小榄婚纱摄影2012-09-27 19:57:03 | 回复 学习了,不错.
admin admin2012-09-26 01:23:37 | 回复 你博客里“抢注百度相册域名”不错,明天去抢注,顺便我也来分享下。
爱度客IT网 爱度客IT网2012-09-26 00:02:33 | 回复 好方法。收藏。赞!
admin admin2012-09-25 19:36:00 | 回复 楼主的网站也有返回顶部代码,而且拉下滚动条才显示,非常不错哦!
admin admin2012-09-25 19:30:28 | 回复 恩,欢迎楼主在自己的博客部署代码。
自体细胞生长肽 自体细胞生长肽2012-09-25 16:34:41 | 回复 学习一下!我就记不住代码!!每次用到就去百度!!悲哀呀!
刘亚斌博客 刘亚斌博客2012-09-25 16:17:09 | 回复 这个代码有用啊,我喜欢
龙岗婚纱摄影 龙岗婚纱摄影2012-09-25 16:09:02 | 回复 很不错哦~~
admin admin2012-09-25 13:45:01 | 回复 我在首页部署的是“座电梯”形式的返回顶部代码,感觉很新鲜。在内页还是保留原样,内页返回顶部代码有随滚动条跟随的效果蛮不错的。
卢松松 卢松松2012-09-25 00:06:10 | 回复 目前来看,我博客提供的这款返回顶部代码可移植性比较强,所以代码都可以放到JS中,减少代码数量。
但问题是不太美观,效果也渐渐不流行了!
admin admin2012-09-24 15:53:58 | 回复 在页面过长时加入返回顶部滚动条是必须的。
旅途者 旅途者2012-09-24 15:02:49 | 回复 回头试试去,感觉习惯了滚动条……
厚街婚纱摄影 厚街婚纱摄影2012-09-23 15:19:26 | 回复 不错,很好支持一下
admin admin2012-09-22 20:18:47 | 回复 我博客首页用的平滑式返回顶部方法。文章内页效果返回是立即的。
偶看 偶看2012-09-22 17:24:45 | 回复 滚动式的比较友好。
由 admin 于 2012-9-22 20:21:41 最后编辑
李志红博客 李志红博客2012-09-22 14:56:08 | 回复 不错,学习了。。。
展览英才网 展览英才网2012-09-21 18:19:06 | 回复 挺好的!
展览英才网 展览英才网2012-09-21 18:17:56 | 回复 写的不错哦!
家具英才网 家具英才网2012-09-21 18:14:13 | 回复 学习了再说。
坪山婚纱照 坪山婚纱照2012-09-21 14:20:27 | 回复 分享了。确实很不错的代码~
坪山钟爱一生 坪山钟爱一生2012-09-21 14:19:09 | 回复 学习了~~~~
坪山婚纱摄影 坪山婚纱摄影2012-09-21 14:18:28 | 回复 学习了~~
即时比分 即时比分2012-09-21 13:24:51 | 回复 这个不错,学习了