zoukankan html css js c++ java

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>

查看全文

相关阅读:
清除微信浏览器缓存
 JS实现HTML标签转义及反转义
 mvc中服务器端、客户端属性验证
 Ajax.ActionLink参数详解
 Ajax.BeginForm参数详解
 AjaxHelper简介
 将博客搬至CSDN
Sequelize小记
 端口：查看端口状态
 搭建git服务器

原文地址：https://www.cnblogs.com/wrongcode/p/10584637.html