• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

JavaScript控制网页平滑的滚动到指定的元素位置

JavaScript 水墨上仙 1796次浏览

JavaScript控制网页平滑的滚动到指定的元素位置

function elementPosition(obj) {
        var curleft = 0, curtop = 0;
        if (obj.offsetParent) {
            curleft = obj.offsetLeft;
            curtop = obj.offsetTop;
            while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            }
        }
        return { x: curleft, y: curtop };
    }
  function ScrollToControl(id)
        {
            var elem =  document.getElementById(id);
            var scrollPos = elementPosition(elem).y;
            scrollPos = scrollPos - document.documentElement.scrollTop;
            var remainder = scrollPos % 50;
            var repeatTimes = (scrollPos - remainder) / 50;
            ScrollSmoothly(scrollPos,repeatTimes);
            window.scrollBy(0,remainder);
        }
        var repeatCount = 0;
        var cTimeout;
        var timeoutIntervals = new Array();
       
        var timeoutIntervalSpeed;
        function ScrollSmoothly(scrollPos,repeatTimes)
        {
                if(repeatCount < repeatTimes)
                {
                window.scrollBy(0,50);
                }
                else
                {
                repeatCount = 0;
                clearTimeout(cTimeout);
                return;
                }
        repeatCount++;
        cTimeout = setTimeout("ScrollSmoothly('" + scrollPos + "','"+ repeatTimes +"')",10);
        }

使用方法

ScrollToControl('elementID');

页面将会平滑的滚动到元素elementID所在的位置


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明JavaScript控制网页平滑的滚动到指定的元素位置
喜欢 (0)
加载中……