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