概要：
原生JS基于window.scrollTo()封裝垂直滾動(dòng)動(dòng)畫(huà)工具函數(shù)，可應(yīng)用與錨點(diǎn)定位、回到頂部等操作。
####封裝原因：
在vue項(xiàng)目中，遇到需要實(shí)現(xiàn)垂直滾動(dòng)效果的需求，初步想到的方法有兩個(gè)：
1：使用window.scrollTo()方法，但是這個(gè)方法是沒(méi)有動(dòng)畫(huà)效果的，需要手動(dòng)封裝一下。
2：使用JQuery的動(dòng)畫(huà)函數(shù)，缺點(diǎn)比較明顯：需要引入JQuery。
顯然，選擇第一種好很多。

以下為封裝window.scrollTo()的方法scroll()，文件名為scroll.js

// Created by xiaoqiang on 30/05/2018. /*** @param {numeber} currentY 需要移動(dòng)的dom當(dāng)前位置離網(wǎng)頁(yè)頂端的距離* @param {number} targetY 需要移動(dòng)的dom當(dāng)前位置離要移到的位置的距離*/ function scroll (currentY, targetY) {// 計(jì)算需要移動(dòng)的距離let needScrollTop = targetY - currentYlet _currentY = currentYsetTimeout(() => {// 一次調(diào)用滑動(dòng)幀數(shù)，每次調(diào)用會(huì)不一樣const dist = Math.ceil(needScrollTop / 10)_currentY += distwindow.scrollTo(_currentY, currentY)// 如果移動(dòng)幅度小于十個(gè)像素，直接移動(dòng)，否則遞歸調(diào)用，實(shí)現(xiàn)動(dòng)畫(huà)效果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'
引入方法。
在響應(yīng)觸發(fā)事件的函數(shù)中調(diào)用scroll()，需要傳入兩個(gè)參數(shù)，比如：

methods: {test () {const scrollHeight = document.getElementsByClassName('scroll-element')[0].offsetTopconst currentY = document.documentElement.scrollTop || document.body.scrollTopscroll(currentY, scrollHeight)}}

有錯(cuò)誤或不清晰或可以改進(jìn)的地方歡迎指出，O(∩_∩)O~~

總結(jié)

以上是生活随笔為你收集整理的原生JS基于window.scrollTo()封装垂直滚动动画工具函数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。