在内容长页处动态增加滚动的返回头部图标

来源：互联网发布：linux io性能分析编辑：程序博客网时间：2024/06/05 11:58

1.前言：

在做网页设计过程中，如果网页内容的长度不定，且当内容过长时，需要不断下拉滚动条查看新的内容。

但是，如果我需要返回头部看原来旧的内容，又需要往上滚动，让用户感觉很不方便。因此，做一个能够根据内容长度

动态增加返回头部图标的需求应运而生。

2.具体实现：

1）css文件内容：

/******返回顶部*******/p#back-to-top{    position:fixed;    display:none;    bottom:50px;    right:210px;}p#back-to-top a{    text-align:center;    text-decoration:none;    color:#979797;    display:block;    width:50px;    /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/    -moz-transition:color 1s;    -webkit-transition:color 1s;    -o-transition:color 1s;}p#back-to-top a:hover{    color:#333333;}p#back-to-top a span{    background:transparent url(/images/uptotop.png) no-repeat;    border-radius:6px;    display:block;    height:50px;    width:50px;    margin-bottom:5px;text-align:center;    /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/    -moz-transition:background 1s;    -webkit-transition:background 1s;    -o-transition:background 1s;}#back-to-top a:hover span{    background:transparent url(/images/uptotop.png) no-repeat;}

-----------------------------uptotop.png-----------------------------

---------------------------------------------------------------------------

2）页面增加的js代码段（需要jquery的支持）：

<!-- 加载页面 --><script language="javascript" type="text/javascript">$(document).ready(function(){//当滚动条的位置处于距顶部800像素以下时，跳转链接出现，否则消失$(window).scroll(function(){if ($(window).scrollTop()>800){$("#back-to-top").fadeIn(1500);}else{$("#back-to-top").fadeOut(1500);}});//当点击跳转链接后，回到页面顶部位置$("#back-to-top").click(function(){$('body,html').animate({scrollTop:0},1000);return false;});});</script>

0 0