页面中常见返回顶部效果

原创 2018-12-31 20:58:21 268
摘要:<!DOCTYPE html><html>    <head>        <title>页面中常见返回顶部效果(TOP)</title>        <meta charset="UTF-8">&nbs

<!DOCTYPE html>

<html>

    <head>

        <title>页面中常见返回顶部效果(TOP)</title>

        <meta charset="UTF-8">

        <link rel="shortcut icon"  href="static/images/logo.png" type="image/x-icon" />

        <link rel="stylesheet" href="static/css/style.css" type="text/css">

        <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">

        <script type="text/javascript" src="static/js/jquery.js"></script>  


        <script>

        $(function() {

        $(window).scroll(function(){

        if($(window).scrollTop()>150){

        $('#back').fadeIn(1000)

        }else{

        $('#back').fadeOut(1000)

        }




        })

        })


       </script>

    </head>

    <body>

    <a href=""></a>

    <div>网页内容</div>

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

   

    </body>

</html>


批改老师:天蓬老师批改时间:2018-12-31 22:02:12
老师总结:返回顶部是非常常用的一种操作, 一定要搞明白原理,以及涉及到的dom元素

发布手记

热门词条