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

如何使用它:

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

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

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

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

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

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

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

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

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

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

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

.class-1 {
  /* cool CSS3 aniamtions here */
}

.class-2 {
  /* cool CSS3 aniamtions here */
}

7.可用选项。

$('.anchor-scroll').anchorScroll({

  // scroll speed
  scrollSpeed: 800,

  // top offset in pixels
  offsetTop: 0,

  // callbacks
  onScroll: function () { 
    // callback on scroll start
  },

  scrollEnd: function () { 
    // callback on scroll end
  }
  
});

更新日志：

2022-02-05

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

预览截图

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