锚点 smooth-scrolljs库 平滑滚动 / scrollIntoView

本文介绍了如何使用smooth-scroll库实现页面锚点的平滑滚动,包括安装、配置和基本使用。同时,文章还探讨了使用scrollIntoView方法进行平滑滚动的另一种方式,详细解释了该方法的参数配置及其在页面滚动中的应用。
摘要由CSDN通过智能技术生成

在项目中需要进行点击移动页面位置,第一个想到的就是锚点 配合 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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值