js+css实现回到顶部按钮（back to top）

来源：互联网发布：法律大数据编辑：程序博客网时间：2024/05/17 21:38

转自：http://www.jb51.net/article/80304.htm

修改了部分，然后直接复制粘贴即可用(放的位置你高兴就好)

需要材料：http://fontawesome.io/ (下载这个icon库)

<style>    p#back-to-top{        position:fixed;        bottom:18px;        right:12px;    }    p#back-to-top a{        text-align:center;        text-decoration:none;        color:#000;        display:block;        width:30px;        /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/        -moz-transition:color1s;        -webkit-transition:color1s;        -o-transition:color1s;    }    p#back-to-top a:hover{        color:#000011;    }    p#back-to-top a span{        background-color:#ffffff;        z-index: -100;        border: 1px solid #cccccc;        border-radius:6px;        display:block;        height:30px;        width:30px;        margin-bottom:5px;        /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/        -moz-transition:background1s;        -webkit-transition:background1s;        -o-transition:background1s;    }    #back-to-top a:hover span{        background-color:#f0f0f0;    }</style><p id="back-to-top"><a href="#top"><span><i class="fa fa-chevron-up" aria-hidden="true"></i></span></a></p><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>    $(document).ready(function(){        //首先将#back-to-top隐藏        $("#back-to-top").hide();        //当滚动条的位置处于距顶部600像素以下时，跳转链接出现，否则消失        $(function () {            $(window).scroll(function(){                if ($(window).scrollTop()>600){                    $("#back-to-top").fadeIn(500);                }else{                    $("#back-to-top").fadeOut(500);                }            });            //当点击跳转链接后，回到页面顶部位置            $("#back-to-top").click(function(){                $('body,html').animate({scrollTop:0},500);                return false;            });        });    });</script>

3 0