zoukankan      html  css  js  c++  java
  • 返回顶部按钮效果实现

    HTML:button按钮也可以

    <div class="return top_btn ng-scope" style="display: block;"></div>

    css:

    .return {
        position: fixed;
        right: 2%;
        bottom: 4.6%;
        width: 48px;
        height: 48px;
        background: url(../images/up_top@2x.png);
        background-size: 100% 100%;
        cursor: pointer;
    }

    js:

            $(document).ready(function () {
                $(".top_btn").hide();
                $(function () {
                    $(window).scroll(function () {
                        if ($(window).scrollTop() > 100) {
                            $(".top_btn").fadeIn(1500);
                        } else {
                            $(".top_btn").fadeOut(1500);
                        }
                    });
                    //当点击跳转链接后,回到页面顶部位置
                    $(".top_btn").click(function () {
                        $('body,html').animate({
                                scrollTop: 0
                            },
                            1000);
                        return false;
                    });
                });
            });
  • 相关阅读:
    MUI-页面传参数
    Spring-boot:多模块打包
    PythonDay11
    PythonDay10
    PythonDay09
    PythonDay08
    PythonDay07
    PythonDay06
    PythonDay05
    PythonDay04
  • 原文地址:https://www.cnblogs.com/dawenyang/p/9779059.html
Copyright © 2011-2022 走看看