JS实现平滑滚动到指定元素

项目中经常会遇到触发事件页面自动滚动到某一位置的情况,一般可以用游标实现,但也有另一种简单的实现思路,利用element.getBoundingClientRect()window.scrollTo()

由于是JS控制滚动条,所以我们可以轻松添加动画效果,代码如下

  function animateScroll(element,speed) {
    let rect=element.getBoundingClientRect();
    //获取元素相对窗口的top值,此处应加上窗口本身的偏移
    let top=window.pageYOffset+rect.top;
    let currentTop=0;
    let requestId;
    //采用requestAnimationFrame,平滑动画
    function step(timestamp) {
      currentTop+=speed;
      if(currentTop<=top){
        window.scrollTo(0,currentTop);
        requestId=window.requestAnimationFrame(step);
      }else{
        window.cancelAnimationFrame(requestId);
      }
    }
    window.requestAnimationFrame(step);
  }

JSBin Demo

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 122,316评论 15 532
  • 暑假已过,回到学校。又重新感受到这是一个非常浮躁的小社会。 室友们都没有多大的变化,自然也像以前那样,聊的话题依然...
    简邱阅读 22评论 0 0
  • 正月初一,大年。 天空微微泛白,已不再下雨。一大早,江临便起床调息身体气机。这两年他蛰居各大城镇之中,不便练剑,但...
    不醉长安城阅读 49评论 0 2
  • 我是你脚下的一颗石子 有着想一直陪伴你的心情 我也有很多同伴 它们也像我这样深爱着你 也许 它们的爱比我还要浓烈 ...
    棠梨煎雪不要蛋阅读 32评论 0 0
  • 近日,因一中国留学生在美国著名大学的一段惊世骇俗的演讲而引发了热议。她在演讲中说,“中国的空气肮脏无比,而美...
    我是饭团团团阅读 270评论 8 2