开发文档页面优化

src/pages/technical-support/doc/detail.vue

@@ -23,6 +23,7 @@
         <div
           class="part_content doc_content apaas_scroll"
           v-html="content"
+          ref="docContent"
         ></div>
       </div>
       <div class="part nav_part">
@@ -38,9 +39,8 @@
               item.id === curNav ? ' current' : '',
             ]"
             :key="index"
-            @click="clickNav(item)"
           >
-            <a :href="'#' + item.id" v-text="item.title"></a>
+            <a v-text="item.title" @click="clickNav(item)"></a>
           </li>
         </ul>
       </div>
@@ -151,8 +151,22 @@ export default {
       successCallback(richTextContent);
     },
     clickNav(item) {
+      let target = document.querySelector(`#${item.id}`);
+
+      this.setScroll(target, this.$refs.docContent);
       this.curNav = item.id;
     },
+    setScroll(el, parentEl) {
+      let actualTop = el.offsetTop;
+      let current = el.offsetParent;
+
+      while (current !== null) {
+        actualTop += current.offsetTop;
+        current = current.offsetParent;
+      }
+
+      parentEl.scrollTop = actualTop - parentEl.offsetTop;
+    },
   },
 };
 </script>
@@ -248,6 +262,7 @@ export default {
   line-height: 30px;
   color: #58617a;
   text-decoration: none;
+  cursor: pointer;
 }
 .nav_content > li.level_1 > a {
   color: #242c43;