zoukankan      html  css  js  c++  java
  • 时隔一年,window.scroll

    function scrollToTop() {
            return function(btn, input) {
                var flag = false;
                var timer;
    
                function autoScroll(input) {
                    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                    if (scrollTop !== 0) {
                        timer = setInterval(function() {
                            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                            if (scrollTop === 0) {
                                clearInterval(timer);
                            } else {
    
                                scrollTop -= (document.body.scrollTop) / 8;
                                document.documentElement.scrollTop = document.body.scrollTop = (scrollTop < 5 ? scrollTop = 0 : scrollTop);
                                input.value = scrollTop;
                                flag = true;
                            }
                        }, 50);
                    }
                }
                window.onscroll = function() {
                    if (!flag) {
                        clearInterval(timer);
                    }
                    flag = false;
                };
    
                btn.onclick = function() {
                    autoScroll(input);
                };
            };
        }

    看了看14年底写的关于页面滚动的代码,居然还是有让我值得思考才能想明白的问题.顿时觉得进步有限.今天我把曾经的代码做了一个封装.避免了全局变量的出现.代码如上.

    使用方法:

     window.onload = function() {
            var btn = document.getElementsByTagName('button')[0];
            var oInput = document.getElementsByTagName('input')[0];
            var s = scrollToTop();
            s(btn, oInput);
     };
  • 相关阅读:
    之前的博客
    用struts2 s2-045漏洞拿站记录
    修改BlackLowKey皮肤样式,增加占屏比
    SpringBoot自动配置原理
    CAS无锁技术
    CAS单点登录原理解析
    死锁与活锁的区别,死锁与饥饿的区别
    jvm问题
    jdk动态代理的实现原理
    抽象工厂
  • 原文地址:https://www.cnblogs.com/zhangfengyang/p/5065808.html
Copyright © 2011-2022 走看看