JQ实现点击返回顶部（有动画过渡）

html代码部分

<div id="wrapper">            <div class="cont1"></div>            <div class="cont2"></div>            <div class="cont3"></div>            <a href="javascript:void(0)" id="toTop" style="display: block;">             </a>        </div>

css样式

    <style type="text/css">            *{margin: 0;padding: 0;}            #wrapper{margin: 0 auto;width: 480px;}            .cont1{height: 500px;background-color: wheat;}            .cont2{height: 500px;background-color: honeydew;}            .cont3{height: 500px;background-color: blueviolet;}            #toTop {display: none;text-decoration: none;position: fixed;bottom: 10px;right: 10px;overflow: hidden;width: 50px;height: 50px;border: none;text-indent: 100%;background: url(images/top-arrow.png) no-repeat #1F2729 10px 15px;text-align: center;}        </style>

js部分

    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">$(function(){        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失        $(function () {            $(window).scroll(function(){                if ($(window).scrollTop()>100){                    $("#toTop").fadeIn(1500);                }                else                {                    $("#toTop").fadeOut(1500);                }            });            //当点击跳转链接后，回到页面顶部位置            $("#toTop").click(function(){                $('body,html').animate({scrollTop:0},1000);                return false;            });        });    });</script>