回到顶部按钮

这个回到顶部按钮大家到处都可以看到，今天终于自己做了一个，分享给大家

css样式

<style type="text/css">
#go_top {
            display: none;
            position: fixed;
            width: 40px;
            bottom: 25px;
            padding: 10px 8px;
            color: #666;
            background: #ECECEC;
            cursor: pointer;
            font: 24px/12px Helvetica,Arial,Verdana,sans-serif;
            opacity: 0.7;
            outline: 0 none;
            text-align: center;
            text-decoration: none;
            text-shadow: 0 0 1px #DDD;
            vertical-align: baseline;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
        }
</style>

jquery代码

<script>
$(document).ready(function(){
        $(function () {
            //检测屏幕高度
            var height=$('.row-fluid').offset().top;
            //scroll() 方法为滚动事件
            $(window).scroll(function(){
                if ($(window).scrollTop()>height){
                    $('#go_top').show();
                }else{
                    $('#go_top').hide();
                }
            });
            $("#go_top").click(function(){
                $('body,html').animate({scrollTop:0},100);
                return false;
            });
        });
    });
</script>

html部分

<div id="go_top" style="right:20px;">
        <p>▲</p>
</div>

效果图