<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>