用于jimdo网站的"返回页首"、"返回首尾"浮动图片特效代码

        当页面内容比较多时，对访客阅读来说，是不太方便的。一是打开速度有影响，二是要用鼠标去拉那个不太长的滚动条，解决的方法通常是对内容进行分页。分页一般是就具体文章或页面来说的，而就整个网站来说，现在很多网站，包括jimdo网站，常常用文字或按钮做个"返回页首、返回首尾"。最近学习了一点这个知识，而且用了一段时间，本文简单介绍一下，在jimdo网站上实现这个功能的代码。

        文字的"返回页首、返回首尾"这里就不说了，这里只介绍我试用的图片式"返回页首、返回首尾"的代码。要实现这个功能，需要三个步骤：一是CSS代码，二是上传图片，三是HTML代码。

        首先，进入”自定义设计模版“，点击”CSS“，然后输入以下代码：

#scroll { clear:both; position:fixed; right:40px; bottom:70px; width:32px; height:76px; z-index:99; }

#scroll a { background:url(scroll.png) no-repeat; float:left; display:inline; text-indent:-10000px; width:32px; height:38px; }

#scroll a.back-to-top {background-position:left top;}

#scroll a.back-to-top:hover{background-position:right top;}

#scroll a.back-to-bottom{background-position:left bottom;}

#scroll a.back-to-bottom:hover {background-position:right bottom;}

        在这里，采用的是固定定位法，将这个图片定位在屏幕的右下角，即“right:40px; bottom:70px; ”

        第二步，点击“文件”，然后上传一个名称叫“scroll.png”的图片，如下：     

以上完成后，保存退出。

     第三步，在页面的公共部分，即广告盒下方，添加“Widget/HTML”元素，也就是以下代码：

     <div id="scroll">
     <a href="#" title="返回页首" class="back-to-top">返回页首</a>
     <a href="#footer" title="返回页尾" class="back-to-bottom">返回页尾</a>
     </div>

        以上代码也是本站目前所使用的，由于IE6及以下版本不支持CSS的固定定位，采用以上代码，那个按钮图片只能出现在添加“Widget/HTML”代码的地方，其它大部分浏览器，都出现在屏幕的右下角，固定不变的。

     （本文代码根据 糖醋实验室 的效果修改而来，特此感谢！ ）

本文转自 网上邻居

相关文章：

简单实现返回页面顶部-返回页面顶部代码（top）