zoukankan      html  css  js  c++  java
  • 按钮滚动到指定位置(JS)

    function intval(v) {
        v = parseInt(v);
        return isNaN(v) ? 0 : v;
    }
    function getPos(e) {
        var l = 0;
        var t = 0;
        var w = intval(e.style.width);
        var h = intval(e.style.height);
        var wb = e.offsetWidth;
        var hb = e.offsetHeight;
        while (e.offsetParent) {
            l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
            t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
            e = e.offsetParent;
        }
        l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
        t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
        return {
            x: l,
            y: t,
            w: w,
            h: h,
            wb: wb,
            hb: hb
        };
    }
    function getScroll() {
        var t, l, w, h;
        if (document.documentElement && document.documentElement.scrollTop) {
            t = document.documentElement.scrollTop;
            l = document.documentElement.scrollLeft;
            w = document.documentElement.scrollWidth;
            h = document.documentElement.scrollHeight;
        } else if (document.body) {
            t = document.body.scrollTop;
            l = document.body.scrollLeft;
            w = document.body.scrollWidth;
            h = document.body.scrollHeight;
        }
        return {
            t: t,
            l: l,
            w: w,
            h: h
        };
    }
    function scroller(el, duration) {
        if (typeof el != "object") {
            el = document.getElementById(el);
        }
        if (!el) return;
        var z = this;
        z.el = el;
        z.p = getPos(el);
        z.s = getScroll();
        z.clear = function() {
            window.clearInterval(z.timer);
            z.timer = null
        };
        z.t = (new Date).getTime();
        z.step = function() {
            var t = (new Date).getTime();
            var p = (t - z.t) / duration;
            if (t >= duration + z.t) {
                z.clear();
                window.setTimeout(function() {
                    z.scroll(z.p.y, z.p.x)
                }, 13);
            } else {
                st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t;
                sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l;
                z.scroll(st, sl);
            }
        };
        z.scroll = function(t, l) {
            window.scrollTo(l, t)
        };
        z.timer = window.setInterval(function() {
            z.step();
        }, 13);
    }
    

    调用方式 :

    onclick="scroller('igbook', 200)"
  • 相关阅读:
    C#进阶之路(五):Linq初识
    C#进阶之路(四):拉姆达
    SQL夯实基础(五):索引的数据结构
    SQL夯实基础(四):子查询及sql优化案例
    SQL夯实基础(三):聚合函数详解
    C#进阶之路(三):深拷贝和浅拷贝
    SQL夯实基础(二):连接操作中使用on与where筛选的差异
    前端面试题整理—HTML/CSS篇
    CSS盒模型
    node的优缺点及应用场景
  • 原文地址:https://www.cnblogs.com/whoamme/p/3600749.html
Copyright © 2011-2022 走看看