###背景
近期项目需求实现同一页面内进行导航跳转。一开始想到的是通过描点定位,但是跳转效果不好,没有过渡的动画。后来试了scrollIntoView和scroll-behavior: smooth,一方面浏览器兼容性不好,另一方面无法控制过渡时间,内容很多时跳转太慢。于是自己封装了一个跳转函数,支持立刻跳转、线性过渡、先快后慢(缓动)三种跳转方式。此模块是由原生js编写,不依赖其他插件库。

演示

\"在这里插入图片描述\"

详见:https://theoxiong.github.io/scroll-ease-efficient/

安装方法

$   npm install scroll-ease-efficient 

使用

// 支持 CommonJs/ES6/  三种引入
// 1. CommonJs 
const { scrollTo } = require(\'scroll-ease-efficient\')
// 2. ES6
import { scrollTo } from \'scroll-ease-efficient\'
// 3.  
<  type=\"text/ \" src=\"scroll-ease-efficient/index.js\"></ >

// 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> 可滚动元素
  • pos <Number> 指定滚动的位置(相对于顶部)
  • options < >
    • timingFunction <String> 配置时间曲线(动画效果)
    • duration <Number>动画过渡时间,默认为1000ms
    • factor <Number> 缓动因子,次参数只对“gradually ”模式有效

项目地址:https://github.com/TheoXiong/scroll-ease-efficient    欢迎star

收藏 打印