在项目中需要进行点击移动页面位置,第一个想到的就是锚点 配合 smooth-scroll
锚点 配置 smooth-scroll
安装
npm install smooth-scroll
或者直接下载 使用GitHub - cferdinandi/smooth-scroll:一个轻量级脚本,用于对滚动到锚点链接进行动画处理。
使用
我是npm安装的需要页面中引入
import SmoothScroll from 'smooth-scroll'
页面中使用的是 a 标签,选中标签,添加配置
let scroll = new SmoothScroll('a[href*="#"]',{
speed: 1000, // 动 1000px 所需的毫秒时间
easing: 'easeInOutQuint' // 缓动模式
});
SmoothScroll的第一个参数是一个选择器 这里是选中了 所有锚点跳转的a标签,第二个参数是动画的配置 常用的就这2个,可能你还会用到
offset 跳转后的偏移 (数字):比如我们需要跳转后和页面顶端有一定距离,可以设置一个 20