欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery点击回到顶部

程序员文章站 2022-08-31 12:36:35
jquery实现点击回到顶部 ......

jquery实现点击回到顶部

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>回到顶部</title>
    <meta name="viewport" content="width=1200, maximum-scale=1.0, user-scalable=1">
    <style>
        .scrolltotop{
            display: block;
            width: 42px;
            height: 42px;
            position: fixed;
            bottom: 5%;
            right: 2%;
            display: none;
            font-size: 40px;
            background: #232323;
            color: #ebebeb;
            border-radius: 3px;
            text-align: center;
            line-height: 38px;
            z-index: 999;
        }
        .scrolltotop i img{margin:9px 0px 0px 2px;}
    </style>


</head>
<body style="height:2000px">
        
<a href="#" title="sroll" class="scrolltotop"><i><img src="https://www.cnblogs.com/images/cnblogs_com/wrongcode/1426773/o_uptop0.png" alt=""></i></a>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
        $(window).scroll(function() {
            if ($(this).scrolltop() > 300) {
                $('.scrolltotop').fadein();
            } else {
                $('.scrolltotop').fadeout();
            }
        });

        $('.scrolltotop').on("click", function() {
            $('html, body').animate({
                scrolltop: 0
            }, 800);
            return false;
        });
</script>

</body>
</html>