N0ts-blog

  • 首页
  • 简介
  • 友人
  • 分类
    • 笔记
    • 我的项目
    • 日常
  • 其他小站
    • 主页
    • Nutscraft
    • lovexhj
    • 笔记
  • 留言
I AM N0TS
即使前方的路看似绝境,也要有硬生生给自己开出一条路的勇气
  1. 首页
  2. 日常
  3. 正文

js实现页面平滑滚动效果

2020年4月14日 1086点热度 6人点赞 1条评论

前言

很久没写博文了,来分享一个我平常前端开发常用的一个js吧

这个js可以让超链接快速跳转区域的时候实现平滑移动而不是瞬间跳转

该插件github地址为 https://github.com/HjalmarSnoep/smoothScroll

 

使用方法

首先当然是在页内引入js啦

<script type="text/javascript" src="./js/smoothScroll-ES5.js"></script>

 

然后在需要实现跳转的超链接后面加上scrollTo="ID名" class="scrollOnClick"这俩属性

<a href="#about" scrollTo="about" class="scrollOnClick">关于</a>

 

这样就可以实现平滑滚动到指定ID位置啦,当然还可以加上持续时间duration="毫秒"

<a href="#about" scrollTo="about" class="scrollOnClick" duration="5000">关于</a>

 

标签: 技术分享 资源分享
最后更新:2020年4月14日

n0ts

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

  • 你爹

    傻逼

    2021年3月16日
    回复
  • 取消回复

    我的猪
    love love love

    标签聚合
    技术分享 垃圾笔记 我的项目 Linux 资源分享 html 日常 api
    最近评论
    发布于 1 天前(04月16日) <script language="javascript">aler...
    发布于 1 天前(04月16日) <script language="javascript"> a...
    发布于 3 天前(04月14日) 可以的 我邮箱同qq 方便的话到时候加下我qq?
    发布于 3 天前(04月14日) 您好,看了您的网站,对您的网站特别感兴趣,方便留下个qq邮箱联系么?我也是喜欢学习写网站,目前大一 ...
    发布于 3 天前(04月14日) 您好,看了您的网站,对您的网站特别感兴趣,方便留下个qq邮箱联系么?我也是喜欢学习写网站,目前大一 ...
    最新 热点 随机
    最新 热点 随机
    deepinwine-qq无法加载图片解决方法 无法为具有固定名称“System.Data.SqlClient”的 ADO.NET 提供程序加载在应用程序配置文件中注册的实体框架提供程序类型 解决方案 nrm报错 internal/validators.js:124问题解决办法 .NET Core 3.1 解决跨域请求问题CORS 解决Win10蓝牙添加设备无法连接问题 利用火绒轻松搞定QQ、微信私自获取浏览器历史记录
    无法为具有固定名称“System.Data.SqlClient”的 ADO.NET 提供程序加载在应用程序配置文件中注册的实体框架提供程序类型 解决方案deepinwine-qq无法加载图片解决方法
    SqlServer ssms自增值重置方法 简约、自适应,我的个人主页html源码开源! 无法为具有固定名称“System.Data.SqlClient”的 ADO.NET 提供程序加载在应用程序配置文件中注册的实体框架提供程序类型 解决方案 解决宝塔下载失败wget: unable to resolve host address ‘download.bt.cn’ WordPress官网访问429 Too Many Requests更新不了解决方案 最详细PPT玩转3D功能教程,三分钟学会3D功能
    站长统计
    一言

    :D 获取中...

    COPYRIGHT © 2021 N0ts-blog. ALL RIGHTS RESERVED.

    THEME KRATOS MADE BY VTROIS

    湘ICP备18015792号