栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

无需使用jQuery即可平滑滚动

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

无需使用jQuery即可平滑滚动

尝试使用此平滑滚动演示或类似的算法:

  1. 使用获取当前的最佳位置
    self.pageYOffset
  2. 获取元素的位置,直到要滚动到的位置:
    element.offsetTop
  3. 进行for循环到达该位置,这将非常快,或者使用计时器进行平滑滚动,直到使用
    window.scrollTo

安德鲁·约翰逊的原始代码:

function currentYPosition() {    // Firefox, Chrome, Opera, Safari    if (self.pageYOffset) return self.pageYOffset;    // Internet Explorer 6 - standards mode    if (document.documentElement && document.documentElement.scrollTop)        return document.documentElement.scrollTop;    // Internet Explorer 6, 7 and 8    if (document.body.scrollTop) return document.body.scrollTop;    return 0;}function elmYPosition(eID) {    var elm = document.getElementById(eID);    var y = elm.offsetTop;    var node = elm;    while (node.offsetParent && node.offsetParent != document.body) {        node = node.offsetParent;        y += node.offsetTop;    } return y;}function smoothScroll(eID) {    var startY = currentYPosition();    var stopY = elmYPosition(eID);    var distance = stopY > startY ? stopY - startY : startY - stopY;    if (distance < 100) {        scrollTo(0, stopY); return;    }    var speed = Math.round(distance / 100);    if (speed >= 20) speed = 20;    var step = Math.round(distance / 25);    var leapY = stopY > startY ? startY + step : startY - step;    var timer = 0;    if (stopY > startY) {        for ( var i=startY; i<stopY; i+=step ) { setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); leapY += step; if (leapY > stopY) leapY = stopY; timer++;        } return;    }    for ( var i=startY; i>stopY; i-=step ) {        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);        leapY -= step; if (leapY < stopY) leapY = stopY; timer++;    }}


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/385798.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号