jquery点击回到顶部

程序员文章站 2022-04-28 21:57:05

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>

上一篇： mssql sqlserver 给已存在表添加新的字段及字段备注的方法

下一篇：来叫爸爸

jquery点击回到顶部

jquery实现点击回到顶部

Android点击按钮返回顶部实现代码

iOS实现点击状态栏自动回到顶部效果详解

Android悬浮按钮点击返回顶部FloatingActionButton

Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)

jQuery实现拉动页面固定顶部显示且自动消失(火狐)

Android scrollToTop实现点击回到顶部（兼容PullTorefreshScrollview）

jQuery自定义元素右键点击事件(实现案例)

vue router 跳转后回到顶部的实例

jQuery实现的点击显示隐藏下拉菜单功能完整示例

Android scrollToTop实现点击回到顶部（兼容PullTorefreshScrollview）