<template>
<div>
<h2 ref="目录">目录</h2>
<ul style="list-style-image:radial-gradient(transparent, green, transparent);">
<li @click="$refs.第一章.scrollIntoView({behavior:‘smooth‘})">第一章</li>
<li @click="$refs.第二章.scrollIntoView({behavior:‘smooth‘})">第二章</li>
<li @click="$refs.第三章.scrollIntoView({behavior:‘smooth‘})">第三章</li>
<li @click="$refs.第四章.scrollIntoView({behavior:‘smooth‘})">第四章</li>
</ul>
<button style="position: fixed;right: 60px;bottom: 60px;"
@click="$refs.目录.scrollIntoView({behavior:‘smooth‘})">回到顶部
</button>
<h2 ref="第一章">第一章</h2>
<p style="border: 1px solid red;height: 500px"></p>
<h2 ref="第二章">第二章</h2>
<p style="border: 1px solid green;height: 500px"></p>
<h2 ref="第三章">第三章</h2>
<p style="border: 1px solid yellow;height: 500px"></p>
<h2 ref="第四章">第四章</h2>
<p style="border: 1px solid blue;height: 500px"></p>
</div>
</template>
<script>
export default {
name: "a15"
}
</script>
<style scoped>
</style>
vue项目锚点动画滚动