Anchor-scroll-menu NPM

🏠 Homepage

✨ Demo & Document

Install

$ npm install anchor-scroll-menu

Snapshot

Usage

import React from 'react';
import { AnchorMenu } from 'anchor-scroll-menu';

const commonStyle = { height: 300 };
const id = +new Date();
const menuList = [
  {
    name: 'antiquewhite',
    key: `antiquewhite${id}`,
    content: <div style={{ ...commonStyle, backgroundColor: 'antiquewhite' }} />,
  },
  {
    name: 'skyblue',
    key: `skyblue${id}`,
    content: <div style={{ ...commonStyle, backgroundColor: 'skyblue' }} />,
  },
  {
    name: 'pink',
    key: `pink${id}`,
    content: <div style={{ ...commonStyle, backgroundColor: 'pink' }} />,
  },
  {
    name: 'orange',
    key: `orange${id}`,
    content: <div style={{ ...commonStyle, backgroundColor: 'orange' }} />,
  },
  {
    name: 'lightcoral',
    key: `lightcoral${id}`,
    content: <div style={{ ...commonStyle, backgroundColor: 'lightcoral' }} />,
  },
];

export default () => (
  <div style={{ width: '100%', height: 600 }}>
    <AnchorMenu menuList={menuList} />
  </div>
);

API

Name	Description	Type	Default
menuList	菜单数据数组，key 请确保是唯一的，由字母数字组成，且必须以字母开头	`{ name: string; content: ReactNode; key: string; }[]`	`[]`
menuStyle	menu 区域的 style	`CSSProperties`	`--`
placement	menu 区域的位置	"top" \| "right" \| "bottom" \| "left"	`left`
scrollDirection	滚动方向	"vertical" \| "horizontal"	`vertical`
region	手动滚动时，滚动内容跟父元素顶部距离的区间, 滚动内容一到达该区间, 对应菜单按钮高亮。如果滚动过快时，菜单没有高亮，不妨将区间增大。	`[number, number]`	`[-20, 20]`
easing	缓动动画函数	"linear" \| "easeInQuad" \| "easeOutQuad" \| "easeInOutQuad" \| "easeInCubic" \| "easeOutCubic" \| "easeInOutCubic"	`easeInOutCubic`
duration	用多少 ms 完成滚动动画，单位 ms	`number`	`300`
hideTitle	隐藏内容块的 title	`boolean`	`false`
activeKey	当前激活的 menu 的 key	`string`	`--`
onMenuClick	点击菜单的回调函数	`(key: string, index: number, activeKey: string) => void`	`--`
onReach	点击菜单滚动到达目的地后的回调函数	`(key: string, index: number) => void`	`--`