# Anchor Scrollspy

**Repository Path**: sweetwisdom/anchor-scrollspy

## Basic Information

- **Project Name**: Anchor Scrollspy
- **Description**: 纯js实现html页面锚点 anbchor自动点亮功能
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-31
- **Last Updated**: 2022-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Anchor Scrollspy

> 纯 js 实现 html 页面锚点自动点亮功能
>
> 参考:[simple-scrollspy - npm (npmjs.com)](https://www.npmjs.com/package/simple-scrollspy)

![Honeycam 2021-05-31 16-44-03](./.imgs/Honeycam%202021-05-31%2016-44-03.gif)

# 前言:

在学习研究 bootstrap 的时候,注意到了 bootstrap 的`Scrollspy`特别好用,于是在研究他的实现原理

参照:[Scrollspy · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网 (bootcss.com)](https://v4.bootcss.com/docs/components/scrollspy/#list-item-2)

![Honeycam 2021-05-31 16-47-52](./.imgs/Honeycam%202021-05-31%2016-47-52.gif)

于是在 npm 上找到了`Simple Scrollspy`,核心思想大致如下:

> - [ ] 监听要滚动的区域
> - [ ] 监听滚动时距离页面最近的元素 item 是哪一个
> - [ ] 为对应 item 的 a 标签添加'active'类名

# 使用

## 1.引入

```js
<script src="./scroll.js"></script>
```

## 2.注册

```js


<script>
        let instance = new ScrollSpy('#main-menu', {
            sectionClass: '.scrollspy',
            menuActiveTarget: '.menu-item',
            offset: 100,
            activeClass: "active",
            scrollContainer: '.scroll-container', //监听滚动的区域可选
        })
        instance.init() // 注册监听滚动
//
</script>


```

## 3.参数说明

| 参数名           | 定义           | 默认       |     |
| ---------------- | -------------- | ---------- | --- |
| sectionClass     | 文章的类名     | .scrollspy |     |
| menuActiveTarget | 激活的菜单目标 | li > a     |     |
| offset           | 偏移量         | 0          |     |
| hrefAttribute    | herf           | href       |     |
| activeClass      | 激活后的类名   | active     |     |
| scrollContainer  | 监听滚动的容器 | windows    |     |

# 4.案例源码

```shell
git clone https://gitee.com/sweetwisdom/anchor-scrollspy.git

code .


```

[参照:index](https://gitee.com/sweetwisdom/anchor-scrollspy/blob/master/index.html)