这次，潜行者m带来一个jquery的比较实用的教程，就是为你的网站添加一个纯代码画出来的、简洁美观的回到顶部按钮。这个按钮的效果就是，当页面滑动一段距离之后，就会浮现出来这个按钮，点击这个按钮之后，就自动滚动到顶部。具体效果如下：

点击之后就会跳转到顶部，然后这个按钮平滑消失。与网上的相比，潜行者m版的是纯代码，加载速度更快，效果色彩控制好；代码精简，只有数条而已，拒绝大坨大坨的代码。废话不多说，下面就开始制作。

html结构

我使用了a标签作为这个结构，可能不太标准，但是比较方便。在a标签中，内置了一个span标签，用来显示三角号。具体代码如下：

<a id=”gotop” href=”#”>
    <span class=”gotop-shang”>▲</span>
</a>

对，你没看错，就这么简单的一句代码，直接在a标签中，填写一个三角号。剩下的就是使用css进行样式控制。

css代码

a[id=”gotop”]{
    display:block;
    width:60px;
    height:60px;
    position:fixed;
    bottom:50px;
    right:40px;
    border-radius:10px 10px 10px 10px;
    text-decoration:none;
    display:none;
    background-color:#999999;
    }

上面这段代码，定义了a标签的外观样式，定义display为block，这样，我们才能指定它的width和height。定义position为fixed，让它固定在右下角。同时为它指定圆角，就是使用border-radius属性，定于半径为10px的圆角。

span{
    display:block;
    width:60px;
    color:#dddddd;
    }
span:hover{
    color:#cccccc;
    }
span[class=”gotop-shang”]{
    font-size:40px;
    text-align:center;
    margin-top:4px;
    }

上面这一段，就是定义了span标签里面的三角号，如果你不会打三角号，可以看本人的这篇文章：亲自打造属于自己网站风格的工具边栏，里面有提到这个。这几句代码意思很简单，就是定义了三角号的外观样式，同时制定了颜色变化，这是为了用户体验。最下面的margin-top：4px，则是用来准确定位三角号，让它居中显示。

jquery代码

具体的javascript代码如下，解析已经写在注释里面了：

$(function(){

$(window).scroll(function(){  //只要窗口滚动,就触发下面代码
    var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
    if( scrollt >200 ){  //判断滚动后高度超过200px,就显示
        $("#gotop").fadeIn(400); //淡出
    }else{
            $("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动
    }
});</pre>

    $(“#gotop”).click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
        $(“html,body”).animate({scrollTop:”0px”},200);
    });
});

怎么样，简单吧？就用这几句代码而已，就可以出现这个功能，而且可以方便的修改颜色、形状、大小等。当然缺点也是有的，就是在IE6等过时的浏览器中，可能不会兼容，无法实现。