实现回到顶部功能，使用锚点定位方式回到页面顶部，出现了路由被替换的情况

    1. <a href="" @click.prevent="custormAnchor('brand')">品牌</a>
    3.   methods: {
    4.         custormAnchor(anchorName) {
    5.         // 找到锚点
    6.         let anchorElement = document.getElementById(anchorName);
    7.         // 如果对应id的锚点存在，就跳转到锚点
    8.         if(anchorElement) { anchorElement.scrollIntoView(); }
    9.     }
    10.     },

    一份长见识的记录：（纯css回到顶部）

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.     <meta charset="utf-8" />
    6.     <title>Flexbox 0 — starting code</title>
    7.     <style>
    8.         .tab label {
    9.             padding: 10px;
    10.             border: 1px solid #ccc;
    11.             margin-right: -1px;
    12.             text-align: center;
    13.             float: left;
    14.             overflow: hidden;
    15.         }
    17.         .tab::after {
    18.             content: "";
    19.             display: table;
    20.             clear: both;
    21.         }
    23.         .box {
    24.             height: 200px;
    25.             border: 1px solid #ccc;
    26.             scroll-behavior: smooth;
    27.             overflow: hidden;
    28.             margin-top: 10px;
    29.         }
    31.         .item {
    32.             height: 100%;
    33.             position: relative;
    34.             overflow: hidden;
    35.         }
    37.         .item input {
    38.             position: absolute;
    39.             top: 0;
    40.             height: 100%;
    41.             width: 1px;
    42.             border: 0;
    43.             padding: 0;
    44.             margin: 0;
    45.             clip: rect(0 0 0 0);
    46.         }
    47.     </style>
    48. </head>
    50. <body>
    51.     <h1>纯CSS选项卡</h1>
    52.     <div class="tab">
    53.         <label for="tab1">选项卡1</label>
    54.         <label for="tab2">选项卡2</label>
    55.         <label for="tab3">选项卡3</label>
    56.     </div>
    57.     <div class="box">
    58.         <div class="item">
    59.             <input type="text" id="tab1">
    60.             <p>选项卡1内容</p>
    61.         </div>
    62.         <div class="item">
    63.             <input type="text" id="tab2">
    64.             <p>选项卡2内容</p>
    65.         </div>
    66.         <div class="item">
    67.             <input type="text" id="tab3">
    68.             <p>选项卡3内容</p>
    69.         </div>
    70.     </div>
    71. </body>
    73. </html>

    查阅大量博文，该方法不需要操作dom,原理后面要补~

    2.  <div class="box" @scroll="scrollEvent">
    3.    <input type="text" />
    4.        <ul>
    5.            <li v-for="(item, index) in imageGruop1" :key="index">
    6.              <div>
    7.               <img :src="item" alt="" />
    8.              </div>
    9.            </li>
    10.        </ul>
    11. </div>
    13. methods: {
    14.          scrollEvent(e) {
    15.            //相等于节点获取元素
    16.             this.div = e.srcElement
    17.         },
    18.           //绑在tabs的事件
    19.         nameFunction() {
    20.             this.div.scrollTop = 0
    21.         },
    22.     },