页面返回顶部效果

Original 2019-04-27 13:28:17 245
abstract:<html> <head>     <title>回到顶部</title>     <script type="text/javascript" src="js/jquery.js"></scr
<html>
<head>
    <title>回到顶部</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css">
    <style type="text/css">
        *{ margin: 0; padding: 0}
        a{ text-decoration: none;}
        div{width: 1200px; height: 2900px;}
        p#back{ text-align: center; position: fixed;
            bottom: 100px; right: 80px; background-color: lightblue; border-radius: 25px;
        width: 100px; height: 40px; display: none; line-height: 40px;}

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

    </script>
</head>
    <body style="background-color: #ccc">

        <a href="#top"></a>
        <div></div>
        <p id="back"><a href="#" id="top">回到顶部 <i class="fa fa-chevron-up"></i></a></p>

    </body>
</html>


Correcting teacher:查无此人Correction time:2019-04-27 17:37:03
Teacher's summary:又看到你了。感觉自己有没有进步?继续加油。

Release Notes

Popular Entries