Scrollbar平滑滾到指定位置

背景

近期項目需求實現同一頁面內進行導航跳轉。一開始想到的是經過描點定位，可是跳轉效果很差，沒有過渡的動畫。後來試了scrollIntoView和scroll-behavior: smooth，一方面瀏覽器兼容性很差，另外一方面沒法控制過渡時間，內容不少時跳轉太慢。因而本身封裝了一個跳轉函數，支持馬上跳轉、線性過渡、先快後慢（緩動）三種跳轉方式。此模塊由原生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
<script type="text/javascript" src="scroll-ease-efficient/index.js"></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 < Dom> target scrollable element
• pos <Number> specified the position which scroll to

• options <Object>

  • timingFunction <String> specify velocity curve of scrolling, default value is 'linear'
  • duration <Number> specify time of scrolling, default value is 1000
  • factor <Number> specify the factor of gradually scrolling, it is only for gradually mode, should less then 100, and more then 1

項目地址：https://github.com/TheoXiong/...   歡迎star