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

近期項(xiàng)目需求實(shí)現(xiàn)同一頁面內(nèi)進(jìn)行導(dǎo)航跳轉(zhuǎn)。一開始想到的是通過描點(diǎn)定位，但是跳轉(zhuǎn)效果不好，沒有過渡的動(dòng)畫。后來試了scrollIntoView和scroll-behavior: smooth，一方面瀏覽器兼容性不好，另一方面無法控制過渡時(shí)間，內(nèi)容很多時(shí)跳轉(zhuǎn)太慢。于是自己封裝了一個(gè)跳轉(zhuǎn)函數(shù)，支持立刻跳轉(zhuǎn)、線性過渡、先快后慢（緩動(dòng)）三種跳轉(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)

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

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

// 指定過渡時(shí)間和動(dòng)畫效果
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