zoukankan      html  css  js  c++  java
  • html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试!

    CSS部分,很简单就一个class

            /*回到顶部*/
            .back-top
            {
                position: fixed;
                right: 15px;
                bottom: 15px;
                z-index: 9999;
                font-size: 25px;
                width: 40px;
                height: 40px;
                background-color: #adadad;
                color: #ffffff;
                cursor: pointer;
                border-radius: 2px;
                text-align: center;
            }
            .back-top:hover
            {
                background-color: #a3a3a3;
            }

    html部分 也非常简单,一个div, 里面一个图标就可以了.图标我是用奥森图标,大家可以自行更换

    <div class="back-top" style="display: none;" title="回到顶部">
            <!--此处回到顶部图标自己改-->
            <i class="fa fa-angle-double-up"></i>
        </div>

    jQuery 部分,也非常简单,相关注意点看注释

            //回到顶部
            $(function () {
                if ($(window).width() >= 700) {//本人的项目是响应式的,但是移动端不显示回到顶部,自己可以去掉
                    $(window).scroll(function () {
                        if ($(window).scrollTop() <= 200) {
                            if ($(".back-top").css("display") != "none") {
                                $(".back-top").slideUp("normal"); //缓慢下降隐藏
                            }
                        }
                        else {
                            if ($(".back-top").css("display") == "none") {
                                $(".back-top").slideDown("normal"); //缓慢上升显示
                            }
                        }
                    });
                }
            });
            $(".back-top").click(function () {
                $("body").animate({ scrollTop: 0 }, "slow"); //回到顶部
            });
  • 相关阅读:
    智能大数据分析平台用例
    Mapreduce实例——去重
    Mapreduce实例——求平均值
    智能大数据分析平台数据流图
    .net程序设计文件操作
    2021.11.17 Guns框架基本应用
    Guns框架基本知识
    2021.11.16 .net——Windows应用程序开发
    1129每日博客
    1126每日博客
  • 原文地址:https://www.cnblogs.com/fancyblogs/p/6273742.html
Copyright © 2011-2022 走看看