案例：判断与顶部距离，点击按钮动态返回顶部

作者: Hello杨先生 | 来源:发表于2019-07-09 16:09 被阅读3次

案例：判断与顶部距离，点击按钮动态返回顶部
jQuery点击锚点平滑滚动
Vue与小程序的返回顶部记录
js 返回页面顶部（动画）
返回顶部实现
recyclerview 快捷滑动到顶部或者置顶位置
Android停止(结束)惯性滚动
vue点击返回顶部插件v-totop
vue返回顶部带动画
点击按钮返回页面顶部

css

<style>
        #top {
            width: 50px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            background: skyblue;
            color: white;
            position: fixed;
            bottom: 100px;
            right: 30px;
            padding: 0 20px;
            cursor: pointer;
            display: none;
        }
    </style>

body

<body>

    1<br>
    1<br>
    <!--  n个 1<br>  节约控件 删除了-->

    <div onclick="topUp()" id="top">
        回顶部
    </div>
    <script>
        (function () {
            var $ = function (id) {
                return document.getElementById(id);
            }
            window.$ = $;
        })()

        var t;
        window.onscroll = function () {

            var topUp = document.body.scrollTop || document.documentElement.scrollTop;

            if (topUp > 200) {
                // document.getElementById("top").style.display = "block";
                $("top").style.display = "block";
            } else {
                $("top").style.display = "none";
            }

        }

        function topUp() {
            t = setInterval(function () {
                var st = document.body.scrollTop || document.documentElement.scrollTop;
                var speed = Math.floor(-st / 5);
                document.body.scrollTop = document.documentElement.scrollTop = st + speed;

                if (st === 0) {
                    clearInterval(t);
                }
            }, 100)


            // document.body.scrollTop = 0;
            // document.documentElement.scrollTop = 0;
        }
    </script>

</body>

image.png