a标签锚点，平滑滚动，innerHtml，v-html

实现功能

单页中点击a标签实现单页中的定位，并平滑滚动到目标点。 试验innerhtml与v-html将包含html的模板字符串转化为真实html，依旧达到以上功能

a标签锚点，平滑滚动

这里使用id作为锚点，听说也可以使用name，不过name只能跳转a标签，即1,2,3、、这些得是a标签

CSS样式

1. 用于点击的a标签放入ul，li中，ul使用fixed定位，li左浮动
2. wrapper包裹的div都设置一定的高度，使产生滚动条
3. 平滑滚动样式：overflow:scroll;scroll-behavior: smooth; 细节

wrapper得给他设置个高度，否则平滑过渡效果表现不出来。本例中使用一个视高

代码如下

.wrapper div{
    height:500px;
    font-size:50px;
    color:red;
}
.wrapper{
    height: 100vh;
    overflow:scroll;
    scroll-behavior: smooth;
}
ul,li{
    list-style: none;
}
ul{
    position:fixed;
    margin:auto;
    top:100px;
    left:300px;
}
li{
    float: left;
    margin:0 10px;
    font-size: 30px;
}

<ul>
    <li><a href="#div1">div1</a></li>
    <li><a href="#div2">div2</a></li>
    <li><a href="#div3">div3</a></li>
    <li><a href="#div4">div4</a></li>
    <li><a href="#div5">div5</a></li>
    <li><a href="#div6">div6</a></li>
</ul>
<div class="wrapper">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
</div>

将包含字符串的标签语句用innerHtml加入到body

效果一样

const html = `<ul>
    <li><a href="#div1">div1</a></li>
    <li><a href="#div2">div2</a></li>
    <li><a href="#div3">div3</a></li>
    <li><a href="#div4">div4</a></li>
    <li><a href="#div5">div5</a></li>
    <li><a href="#div6">div6</a></li>
</ul>
<div class="wrapper">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
</div>`
document.body.innerHTML = html

vue中使用v-html

说明

1. 锚点用到的ul，li不包含进字符串中
2. 在一个div中使用v-html，而不是在template标签中使用，因为template标签实际上最后是不存在的
3. 注意每个div的高度，排查bug，使class为wrapper的div有高度，让其包含的子div能溢出该高度，产生滚动条。这里测试到，如果不给wrapper指定高度，让其自然包裹子div，vue中是不能生成能滚动的滚动条的
4. 样式中注意">>>"的使用，这样才能给字符串生成的标签提供样式（我也是百度来的，不知道还有没有其他方法）

<template>
  <div class="other-container">
    <ul>
      <li><a href="#div1">div1</a></li>
      <li><a href="#div2">div2</a></li>
      <li><a href="#div3">div3</a></li>
      <li><a href="#div4">div4</a></li>
      <li><a href="#div5">div5</a></li>
      <li><a href="#div6">div6</a></li>
    </ul>
    <div v-html="html" class="wrapper"></div>
  </div>
</template>

<script>
export default {
  name: "other",
  data() {
    return {
      html: `<div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
        <div id="div4">4</div>
        <div id="div5">5</div>
        <div id="div6">6</div>`,
    };
  },
};
</script>

<style scoped>
.other-container {
  height: 100%;
}
.wrapper {
  height: 100%;
  overflow: scroll;
  scroll-behavior: smooth;
}
.wrapper >>> div {
  height: 500px;
  font-size: 50px;
  color: red;
}
ul,
li {
  list-style: none;
}
ul {
  position: fixed;
  margin: auto;
  top: 100px;
  left: 300px;
}
li {
  float: left;
  margin: 0 10px;
  font-size: 30px;
}
</style>