摘要：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>

效果圖

批改老師：韋小寶批改時間：2018-12-11 09:14:23
老師總結(jié)：回到頂部的這種效果基本上各大網(wǎng)站或者網(wǎng)頁都是隨處可見的！實現(xiàn)起來也很簡單！但是課后還是得練習哦！