jquery html 回到顶部左下角

torpidcat

已于 2022-07-12 19:38:56 修改

阅读量239

点赞数

分类专栏： HTML js jquery 文章标签： html 前端 javascript

于 2022-07-12 19:32:59 首次发布

本文链接：https://blog.csdn.net/torpidcat/article/details/125750130

版权

js jquery 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 0 订阅

订阅专栏

网页右下角

手机端

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>回到顶部 基于jquery</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    
    <!-- JAVASCRIPTS -->
    <script src="./assets/js/jquery-1.10.2.min.js"></script>
    
    <style class="blockbyte-bs-style" data-name="content">

        /* 回到顶部相关样式  关键字 common-backtop-link */
        .common-backtop-link {
            position: fixed;
            right: 24px;
            bottom: 40px;
            width: 48px;
            height: 48px;
            background: #FFF;
            border: 1px solid #FFF;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            box-shadow: 0px 8px 40px 0px rgba(30, 35, 45, 0.08);
            cursor: pointer;
            z-index: 1000;
            display: none;
        }
        .common-backtop-link i{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-image: url(assets/images/right-bar-back-top.png);
            background-repeat: no-repeat;
            background-position: center center;
            -webkit-border-radius:50%;
            -moz-border-radius:50%;
            -o-border-radius:50%;
            border-radius:50%;
        }
        .common-backtop-link:hover {
            background: linear-gradient(0deg, #FFFFFF,#F0F2F5);
        }
        .common-backtop-link:hover i{
            background-image: url(assets/images/right-bar-back-top-active.png);
        }
    </style>
</head>

<body>
    <div style="height: 3055px;" >
        <!-- 给个高度 滑动页面唤出 回到顶部 按钮 -->
    </div>

    <!-- 回到顶部相关代码  关键字 common-backtop-link 默认隐藏元素 display: block-->
    <div class="common-backtop-link" style="display: block;"><i></i></div>

    <script type="text/javascript">
        // 回到顶部相关js代码
        //滑动页面超过一个屏幕的高度时 则显示 回到顶部元素
        $(window).scroll(function(){
            $(this).scrollTop()>=$(window).height()?$('.common-backtop-link').show():$('.common-backtop-link').hide();
        })
        // $('.common-backtop-link').show();//默认显示回到顶部元素

        //点击回到顶部
        $(document).on('click','.common-backtop-link',function(){
            $("html,body").animate({
                scrollTop:0
            },300);
        })
    </script>
</body>
</html>

源码下载地址(带图标)：

https://download.csdn.net/download/torpidcat/86063334