document support anchor jump

document/App.vue

@@ -8,33 +8,46 @@
 export default {
   data () {
     return {
-      oldHash: window.location.hash
+      oldPath: window.location.hash
     }
   },
   mounted () {
     const docViewEle = document.body
-    const pattern = /#cube-(.*)-anchor/
     docViewEle.addEventListener('click', (e) => {
       e.preventDefault()
       let target = e.target
       while (target && target.className !== 'anchor') {
         target = target.parentNode
       }
       if (target) {
-        const href = target.getAttribute('href')
-        let newHash = ''
-        if (pattern.test(this.oldHash)) {
-          newHash = this.oldHash.replace(pattern, href)
-        } else {
-          newHash = this.oldHash + href
-        }
-        window.location.hash = newHash
+        this.scrollToHash(target.getAttribute('href'))
       }
     })
   },
   watch: {
     $route (to, from) {
-      this.oldHash = `#${to.path}`
+      debugger
+      this.oldPath = `#${to.path}`
+      this.scrollToHash()
+    }
+  },
+  methods: {
+    scrollToHash (hash) {
+      const pattern = /#cube-(.*)-anchor/
+      let newUrl = ''
+      let matcher
+      if (!hash) {
+        matcher = window.location.hash.match(pattern)
+        if (matcher) {
+          hash = matcher[0]
+        }
+      }
+      matcher = hash.match(pattern)
+      newUrl = this.oldPath + hash
+      window.location.hash = newUrl
+      const anchor = matcher[1]
+      const el = document.querySelector(`#${anchor}`)
+      el && el.scrollIntoView()
     }
   }
 }

document/common/stylus/md.styl

@@ -6,6 +6,8 @@
   color: $color-dark-grey
   p
     margin: 1.2em 0
+    .anchor
+      display: inline-block
   h2
     margin-top: 1.2em
     margin-bottom: .8em
@@ -46,19 +48,18 @@
     margin: 1em 0
   ul
     padding-left: 20px
+  h1, h2, h3, h4
+    .anchor
+      display: none
   h1:hover, h2:hover, h3:hover, h4:hover
     .anchor
-      display: inline-block;
-  .anchor
-    position relative;
-    top: 6px;
-    float: left;
-    padding-right: 4px;
-    margin-left: -20px;
-    line-height: 1;
-    display: none;
-  a:-webkit-any-link
-    cursor: auto;
+      display: inline-block
+      float: left
+      margin-left: -20px
+      position relative
+      top: 6px
+      padding-right: 4px
+      line-height: 1
   img
     max-width: 100%
 pre

document/components/docs/en-US/quick-start.md

@@ -2,17 +2,17 @@
 
 ### CLI
 
-If you are going to create a new project with cube-ui, use the [cli tools](https://github.com/cube-ui/cube-template) base on [vue-cli](https://github.com/vuejs/vue-cli) to init the config and base code, then you can ignore the Install steps and see the Usage part directly.
+If you are going to create a new project with cube-ui, use the [cli tools](https://github.com/cube-ui/cube-template) base on [vue-cli](https://github.com/vuejs/vue-cli) to init the config and base code, then you can ignore the <a href="#cube-Install-anchor" class="anchor">Install</a> steps and see the <a href="#cube-Usage-anchor" class="anchor">Usage</a> part directly.
 
 ```shell
 $ vue init cube-ui/cube-template projectname
 ```
 
-If you are going to use cube-ui in an existing project, see the Install part first.
+If you are going to use cube-ui in an existing project, see the <a href="#cube-Install-anchor" class="anchor">Install</a> part first.
 
 ### Install
 
-#### NPM:
+#### NPM
 ```shell
 $ npm install cube-ui --save
 ```

document/components/docs/zh-CN/quick-start.md

@@ -2,13 +2,13 @@
 
 ### 脚手架
 
-如果你打算用在一个新项目中使用 cube-ui，可以通过我们提供的一套基于 [vue-cli](https://github.com/vuejs/vue-cli) 实现的[脚手架](https://github.com/cube-ui/cube-template)去初始化 cube-ui 项目的配置和基础代码，这样你就可以忽略后续的安装步骤，直接看使用部分。
+如果你打算用在一个新项目中使用 cube-ui，可以通过我们提供的一套基于 [vue-cli](https://github.com/vuejs/vue-cli) 实现的[脚手架](https://github.com/cube-ui/cube-template)去初始化 cube-ui 项目的配置和基础代码，这样你就可以忽略<a href="#cube-安装-anchor" class="anchor">安装</a>步骤，直接看<a href="#cube-使用部分-anchor" class="anchor">使用部分</a>。
 
 ```shell
 $ vue init cube-ui/cube-template projectname
 ```
 
-如果你打算在现有项目中使用 cube-ui，请先参考安装部分。
+如果你打算在现有项目中使用 cube-ui，请先参考<a href="#cube-安装-anchor" class="anchor">安装</a>部分。
 
 ### 安装
 

document/components/viewport/viewport.vue

@@ -44,7 +44,8 @@
       const matcher = window.location.hash.match(pattern)
       if (matcher) {
         const anchor = matcher[1]
-        mdBodyEle.querySelector(`#${anchor}`).scrollIntoView()
+        const el = mdBodyEle.querySelector(`#${anchor}`)
+        el && el.scrollIntoView()
       }
     },
     components: {