ant-design-vue锚点

1.npm install ant-design-vue
2.main.js引入

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;
Vue.use(Antd);

3.使用·

<template>
	<div class="home">
		<a-button type="primary">Button></a-button>
		<a-dropdown>
			<a class="ant-dropdown-link" @click="e => e.preventDefault()">
				Hover me
				<a-icon type="down" />
			</a>
			<a-menu slot="overlay">
				<a-menu-item>
					<a href="javascript:;">1st menu item</a>
				</a-menu-item>
				<a-menu-item>
					<a href="javascript:;">2nd menu item</a>
				</a-menu-item>
				<a-menu-item>
					<a href="javascript:;">3rd menu item</a>
				</a-menu-item>
			</a-menu>
		</a-dropdown>
		<a-input placeholder="Basic usage" />
		<div style="width: 50%;float: right;">
			<h2 id="1">aaaaaaa</h2>
			<h3 id="2">bbbbbbbb</h3>
			<h2 id="3">aaaaaaa</h2>
			<h3 id="4">bbbbbbbb</h3>
			<h2 id="5">aaaaaaa</h2>
			<h3 id="6">bbbbbbbb</h3>
			<h2 id="7">aaaaaaa</h2>
			<h3 id="8">bbbbbbbb</h3>
			<h2 id="9">aaaaaaa</h2>
			<h3 id="10">bbbbbbbb</h3>
			<h2 id="11">aaaaaaa</h2>
			<h3 id="12">bbbbbbbb</h3>
			<h2 id="13">aaaaaaa</h2>
			<h3 id="14">bbbbbbbb</h3>
			<h2 id="15">aaaaaaa</h2>
			<h3 id="16">bbbbbbbb</h3>
			<h2 id="17">aaaaaaa</h2>
			<h3 id="18">bbbbbbbb</h3>
			<h2 id="19">aaaaaaa</h2>
			<h3 id="20">bbbbbbbb</h3>
			<h3 id="21">bbbbbbbb</h3>
			<h3 id="22">bbbbbbbb</h3>
			<h3 id="23">bbbbbbbb</h3>
			<h3 id="24">bbbbbbbb</h3>
			<h3 id="25">bbbbbbbb</h3>
			<h3 id="26">bbbbbbbb</h3>
		</div>
		<a-anchor :affix="false" @change="onChange" style="width: 50%;float: left;position: fixed;background: pink;">
			<a-anchor-link href="#1" title="Basic demo" />
			<a-anchor-link href="#2" title="Static demo" />
			<a-anchor-link href="#3" title="Basic demo" />
			<a-anchor-link href="#4" title="Static demo" />
			<a-anchor-link href="#5" title="Basic demo" />
			<a-anchor-link href="#6" title="Static demo" />
			<a-anchor-link href="#7" title="Basic demo" />
			<a-anchor-link href="#8" title="Static demo" />
			<a-anchor-link href="#9" title="Basic demo" />
			<a-anchor-link href="#10" title="Static demo" />
			<a-anchor-link href="#11" title="Basic demo" />
			<a-anchor-link href="#12" title="Static demo" />
			<a-anchor-link href="#13" title="Basic demo" />
			<a-anchor-link href="#14" title="Static demo" />
			<a-anchor-link href="#15" title="Basic demo" />
			<a-anchor-link href="#16" title="Static demo" />
			<a-anchor-link href="#17" title="Basic demo" />
			<a-anchor-link href="#18" title="Static demo" />
			<a-anchor-link href="#19" title="Basic demo" />
			<a-anchor-link href="#20" title="Static demo" />
			<a-anchor-link href="#21" title="Basic demo" />
			<a-anchor-link href="#22" title="Static demo" />
			<a-anchor-link href="#23" title="Basic demo" />
			<a-anchor-link href="#24" title="Static demo" />
			<a-anchor-link href="#25" title="Basic demo" />
			<a-anchor-link href="#26" title="Static demo" />
		</a-anchor>
	</div>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				targetOffset: undefined,
				visible: false,
				pStyle: {
					fontSize: '16px',
					color: 'rgba(0,0,0,0.85)',
					lineHeight: '24px',
					display: 'block',
					marginBottom: '16px',
				},
				pStyle2: {
					marginBottom: '24px',
				},
			};
		},
		methods: {
			onChange(link) {
				console.log('Anchor:OnChange', link);
			},
		},
		mounted() {
			// this.targetOffset = window.innerHeight ;
		},
	}
</script>
<style>
	h2{
		height:500px;
		border:1px solid red;
		box-sizing: border-box;
		background: #ccc;
	}
	h3{
		height:500px;
		border:1px solid blue;
		box-sizing: border-box;
		background: #ccc;
	}
</style>