这篇文章主要介绍了关于原生js基于window.scrollto()封装垂直滚动动画工具函数 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
概要：原生js基于window.scrollto()封装垂直滚动动画工具函数，可应用与锚点定位、回到顶部等操作。
封装原因：
在vue项目中，遇到需要实现垂直滚动效果的需求，初步想到的方法有两个：
1：使用window.scrollto()方法，但是这个方法是没有动画效果的，需要手动封装一下。
2：使用jquery的动画函数，缺点比较明显：需要引入jquery。
显然，选择第一种好很多。
以下为封装window.scrollto()的方法scroll()，文件名为scroll.js
// created by xiaoqiang on 30/05/2018./** * @param {numeber} currenty 需要移动的dom当前位置离网页顶端的距离 * @param {number} targety 需要移动的dom当前位置离要移到的位置的距离 */function scroll (currenty, targety) {  // 计算需要移动的距离  let needscrolltop = targety - currenty  let _currenty = currenty  settimeout(() => {    // 一次调用滑动帧数，每次调用会不一样    const dist = math.ceil(needscrolltop / 10)    _currenty += dist    window.scrollto(_currenty, currenty)    // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果    if (needscrolltop > 10 || needscrolltop < -10) {      scroll(_currenty, targety)    } else {      window.scrollto(_currenty, targety)    }  }, 1)}// 暴露此方法export default scroll
使用方法比如在vue中，可以这样用：
import scroll form '@/common/util/scroll.js'
随后在响应触发事件的函数中调用scroll()，需要传入两个参数，比如：
methods: {        test () {          const scrollheight = document.getelementsbyclassname('scroll-element')[0].offsettop          const currenty = document.documentelement.scrolltop || document.body.scrolltop          scroll(currenty, scrollheight)        }      }
有错误或不清晰或可以改进的地方欢迎指出，o(∩_∩)o~~
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
js实现归并排序
vue 实现数字滚动增加效果
jquery添加loading过渡遮罩
以上就是原生js基于window.scrollto()封装垂直滚动动画工具函数的详细内容。