完成返回顶部案例

原创 2018-12-11 02:26:03 145
摘要:html代码<a href="#top"></a> <div></div> <p id="back"><a href="" id="top"><i class="fa fa

html代码

<a href="#top"></a>
<div></div>
<p id="back"><a href="" id="top"><i class="fa fa-arrow-circle-up"></i><br>返回顶部</a></p>

css代码

<style type="text/css">
    div{width: 1200px;height:1500px;margin:0 auto;background: #ccc;}
    p{width:60px;height: 52px;background: #999;position: fixed;bottom:10px;right:10px;text-align:center;padding-top:8px;display: none;}
    p:hover{background: #bbb;}
    a{text-decoration: none;color:#fff;font-size:12px;}
</style>

js代码

<script type="text/javascript">
    $(function(){
        $(window).scroll(function(){
            if($(window).scrollTop()>100){
                $('#back').fadeIn(300);
            }else{
                $('#back').fadeOut(300);
            }
        });
    })
</script>

效果图

QQ图片20181114103819.png


批改老师:韦小宝批改时间:2018-12-11 09:14:23
老师总结:回到顶部的这种效果基本上各大网站或者网页都是随处可见的!实现起来也很简单!但是课后还是得练习哦!

发布手记

热门词条