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

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

詳見(jiàn)：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)

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

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

// 指定過(guò)渡時(shí)間和動(dòng)畫(huà)效果
scrollTo(scrollEle, 500, { timingFunction: "liner", duration: 500})

// 指定緩動(dòng)因子, 只對(duì)"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