首页 > 其他分享 >js平滑的页面滚动效果插件smoothScroll-Es5.js

js平滑的页面滚动效果插件smoothScroll-Es5.js

时间:2024-12-24 16:44:36浏览次数:10  
标签:idtoScrollTo 插件 滚动 平滑 Es5 js smoothScroll 页面

smoothScroll-Es5.js是一款js平滑的页面滚动效果插件。通过它可以制作页面锚链接之间的平滑滚动效果,和平滑的返回页面顶部效果等。

 

在线预览   下载

 使用方法

在页面中引smoothScroll-ES5.js文件。

<script type="text/javascript" src="path/to/js/smoothScroll-ES5.js"></script>                 
 HTML结构

然后为你的页面文章添加需要的锚点。例如:

<section id="idtoScrollTo"></section>

你可以使用超链接,或其它元素来触发平滑滚动效果。只需要为元素添加scrollOnClick的class类,并添加一个自定义属性scrollTo,指向要滚动到的内容的ID。

<a href="#idtoScrollTo" scrollTo="idtoScrollTo" class="scrollOnClick">go scroll</a>           

你还可以通过duration属性定义平滑滚动的持续时间,以及通过easing属性来指定平滑滚动的类型:linearsmooth

<a href="#idtoScrollTo" duration="5000"             easing="smooth"             scrollTo="idtoScrollTo"             class="scrollOnClick">Test</a> 

标签:idtoScrollTo,插件,滚动,平滑,Es5,js,smoothScroll,页面
From: https://www.cnblogs.com/skonw/p/18628050

相关文章

  • 高性能js固定侧边栏插件
    sticky-sidebar.js是一款高性能的js固定侧边栏插件。通过sticky-sidebar.js插件,你可以快速的为网站制作出固定侧边栏效果。在线预览 下载 它的特点还有:在页面滚动是,不需要重新计算所有的坐标,金辉计算必要的坐标。页面平滑滚动,不会产生页面滚动侧边栏滞后的感觉。当侧边......
  • 用pandas导入含嵌套字典的json文件至mysql数据库
    需要导入的文件格式如下,要把data-diff数组里的所有元素导进去,对于某些json文件还需要添加日期字段。{"rc":0, "rt":6, "data":{ "total":197, "diff":[ { "f1":1, "f2":295.5, "f3":{"f4":......
  • node.js基于Web的网上订餐系统的设计与实现程序+论文 可用于毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于网上订餐系统的研究,现有研究主要以功能实现和用户体验优化为主。在国内外,许多研究成果集中在大型订餐平台的商业模式、用户界面设计等方面。例如,一......
  • node.js毕设 大学生竞赛组队系统 论文+程序
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于大学生竞赛组队系统的研究,现有研究主要以竞赛管理、竞赛流程优化等为主,专门针对竞赛组队系统的研究较少。在国内外,虽然对于大学生竞赛相关的组织管......
  • node.js毕设 餐厅预定系统 论文+程序
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于餐厅预定系统的研究,现有研究多集中在大型餐饮企业的应用案例及商业运营模式方面。专门针对系统功能全面性(如涵盖用户、菜品分类、菜品信息、餐桌信......
  • node.js家政服务管理系统程序+论文 可用于毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于家政服务管理系统的研究,现有研究主要以家政服务的某一单独环节(如服务人员管理或服务预约流程)为主,专门针对涵盖用户、服务人员、服务类型、服务信息......
  • EasyPlayer.js视频流媒体播放器如何实现电子放大或局部放大播放功能?
    随着数字化时代的到来,流媒体技术已经成为我们生活中不可或缺的一部分。从娱乐到教育,从远程工作到物联网应用,流媒体技术的广泛应用正在深刻改变我们的生活方式。流媒体行业的快速发展不仅体现在市场规模的扩大,还表现在技术创新、内容多样化、用户体验优化等多个方面。在视频监控......
  • 基于 Spring Boot、MyBatis Plus、MySQL、HTML、CSS、JavaScript、Vue.js、Redis 与 S
    1.项目概述1.1项目目标为学生提供个性化课程推荐,助力高效选课。构建师生交流社区,促进课程相关交流。实现课程与用户信息的高效管理。1.2功能概述用户管理:包括注册、登录、信息修改、角色管理。课程管理:课程发布、查询、修改、删除、选课操作、评价与推荐。交流社区:课......
  • 网页直播/点播播放器EasyPlayer.js如何实现安卓流媒体播放器播放同步录像?
    随着流媒体技术的迅速发展,H5流媒体播放器已成为现代网络视频播放的重要工具。其中,EasyPlayer.js视频流媒体播放器作为一款功能强大的H5播放器,凭借其全面的协议支持、多种解码方式以及跨平台兼容性,赢得了广泛的关注和应用。音视频码流的metadata,即MediaFormat,是从MediaCodec取出来......
  • cs插件CrossC2——上线Linux系统
    介绍一款非常强大的cs插件GitHub-gloxec/CrossC2:generateCobaltStrike'scross-platformpayload,cs的可拓展性非常强大,以后会陆续更新各种插件!下载第一个至第三个加载cna文件,然后会出现下面的图标目前只支持反向的HTTPS连接和正向的TCP连接需要把keys文件复制到C......