摘要：背景近期項目需求實現(xiàn)同一頁面內(nèi)進(jìn)行導(dǎo)航跳轉(zhuǎn)。一開始想到的是通過描點(diǎn)定位，但是跳轉(zhuǎn)效果不好，沒有過渡的動畫。于是自己封裝了一個跳轉(zhuǎn)函數(shù)，支持立刻跳轉(zhuǎn)線性過渡先快后慢緩動三種跳轉(zhuǎn)方式。此模塊由原生編寫，不依賴其他插件庫。

近期項目需求實現(xiàn)同一頁面內(nèi)進(jìn)行導(dǎo)航跳轉(zhuǎn)。一開始想到的是通過描點(diǎn)定位，但是跳轉(zhuǎn)效果不好，沒有過渡的動畫。后來試了scrollIntoView和scroll-behavior: smooth，一方面瀏覽器兼容性不好，另一方面無法控制過渡時間，內(nèi)容很多時跳轉(zhuǎn)太慢。于是自己封裝了一個跳轉(zhuǎn)函數(shù)，支持立刻跳轉(zhuǎn)、線性過渡、先快后慢（緩動）三種跳轉(zhuǎn)方式。此模塊由原生JS編寫，不依賴其他插件庫。

詳見：https://theoxiong.github.io/s...

$   npm install scroll-ease-efficient 

// 支持 CommonJs/ES6/Script 三種引入
// 1. CommonJs 
const { scrollTo } = require("scroll-ease-efficient")
// 2. ES6
import { scrollTo } from "scroll-ease-efficient"
// 3. Script


// scrollable element
let scrollEle = document.getElementById("id")

// 基本用法
scrollTo(scrollEle, 500)

// 指定過渡時間（單位ms）
scrollTo(scrollEle, 500, { duration: 500})

// 指定過渡動畫效果, 支持"gradually"/"liner"/"instant"
scrollTo(scrollEle, 500, { timingFunction: "gradually"})

// 指定過渡時間和動畫效果
scrollTo(scrollEle, 500, { timingFunction: "liner", duration: 500})

// 指定緩動因子, 只對"gradually"方式有效
scrollTo(scrollEle, 500, { timingFunction: "gradually", factor: 6})

function scrollTo (ele, pos, [options])

ele target scrollable element

pos specified the position which scroll to

options