jQuery插件, 平滑 页面滚动和奇妙 效果 anchorScroll

  • 源码大小:6.03KB
  • 所需积分:1积分
  • 源码编号:19JP-3719
  • 浏览次数:745次
  • 最后更新:2023年07月14日
  • 所属栏目:动画
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

anchorScroll是一个jQuery插件,它允许您的锚链接平滑地滚动到文档中的指定部分/位置,此外还可以向特定元素添加CSS类,以便在垂直页面滚动时创建自定义的基于CSS的效果。

如何使用它:

1.下载anchorScroll插件并包含jquery.anchor滚动.min.jsjQuery库之后的脚本。

  1. <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  2. <script src="jquery.anchorScroll.min.js"></script>

2.创建一个锚链接,使您能够顺利地将页面滚动到“#测试”部分。

  1. <a href="#test" class="anchor-scroll"></a>

3.初始化插件以激活平滑的页面滚动。

  1. $('.anchor-scroll').anchorScroll();

4.在页面滚动时向特定元素添加自定义CSS类。

  1. <a href="#test" class="anchor-scroll"
  2. data-class-to="body"
  3. data-scoll-start="class-1"
  4. data-scroll-end="class-2"
  5. ></a>

5.确定是否保留滚动开始/结束时添加的类。

  1. <a href="#test" class="anchor-scroll"
  2. data-class-to="body"
  3. data-scoll-start="class-1"
  4. data-scroll-end="class-2"
  5. data-keep-start
  6. data-keep-end
  7. ></a>

6.当页面星号滚动时,这将把CSS类“class-1”分配给您的“body”标记。您也可以使用数据滚动结束以在停止滚动时将CSS类分配给“body”标记。

  1. .class-1 {
  2. /* cool CSS3 aniamtions here */
  3. }
  4.  
  5. .class-2 {
  6. /* cool CSS3 aniamtions here */
  7. }

7.可用选项。

  1. $('.anchor-scroll').anchorScroll({
  2.  
  3. // scroll speed
  4. scrollSpeed: 800,
  5.  
  6. // top offset in pixels
  7. offsetTop: 0,
  8.  
  9. // callbacks
  10. onScroll: function () {
  11. // callback on scroll start
  12. },
  13.  
  14. scrollEnd: function () {
  15. // callback on scroll end
  16. }
  17. });

更新日志:

2022-02-05

  • 将滚动时的数据属性数据更改为数据滚动开始
  • 添加了保留类选项
  • 代码清理

预览截图