doc: scroll to top when route changes

demo/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <n-config-provider class="demo" namespace="naive-ui-doc" :theme="theme" :language="lang">
-    <n-nimbus-service-layout :padding-body="false" :items="items">
+    <n-nimbus-service-layout ref="layout" :padding-body="false" :items="items">
       <template v-slot:nav>
         <doc-header
           :lang="lang"
@@ -21,8 +21,12 @@ export default {
   components: {
     DocHeader
   },
+  provide () {
+    return {
+      NDocRoot: this
+    }
+  },
   beforeRouteEnter (to, from, next) {
-    // console.log(i18n)
     i18n.locale = to.params.lang
     next()
   },
@@ -474,6 +478,9 @@ export default {
     }
   },
   methods: {
+    resetScrollPosition () {
+      this.$refs.layout.resetScrollPosition()
+    },
     handleLangChange (lang) {
       this.lang = lang
     }

demo/privateIndex.js

@@ -1,9 +1,11 @@
 
 import { Vue, router, i18n } from './init'
+import demoRouterView from './demoRouterView'
 
 if (localStorage.token === 'naive') {
   new Vue({
-    router,
-    i18n
+    ...demoRouterView,
+    i18n,
+    router
   }).$mount('#app')
 }

demo/utils/ComponentDocumentation.vue

@@ -4,6 +4,19 @@
   </div>
 </template>
 
+<script>
+export default {
+  inject: {
+    NDocRoot: {
+      default: null
+    }
+  },
+  mounted () {
+    this.NDocRoot.resetScrollPosition()
+  }
+}
+</script>
+
 <style>
 .n-documentation {
   padding: 24px 24px 24px 56px;

packages/common/Layout/src/Layout.vue

@@ -11,7 +11,7 @@
       transition: transitionBlocked ? 'none' : null
     }"
   >
-    <n-scrollbar v-if="!useNativeScrollbar" :content-style="scrollContentStyle" :container-style="scrollContainerStyle">
+    <n-scrollbar v-if="!useNativeScrollbar" ref="scrollbar" :content-style="scrollContentStyle" :container-style="scrollContainerStyle">
       <slot />
     </n-scrollbar>
     <slot v-else />
@@ -77,6 +77,11 @@ export default {
     }
   },
   methods: {
+    resetScrollPosition () {
+      if (this.$refs.scrollbar) {
+        this.$refs.scrollbar.scrollToTop()
+      }
+    },
     blockChildLayoutTransitionOneTick () {
       this.childLayoutTransitionBlocked = true
       this.$nextTick().then(() => {

packages/common/Scrollbar/src/main.vue

@@ -260,8 +260,9 @@ export default {
       this.showVeriticalScrollbar = true
     },
     scrollToTop (smooth = false) {
-      if (this._container()) {
-        this._container().scrollTo({
+      const container = this._container()
+      if (container) {
+        container.scrollTo({
           top: 0
         })
       }

packages/deprecated/NimbusServiceLayout/src/main.vue

@@ -72,6 +72,9 @@ export default {
     }
   },
   methods: {
+    resetScrollPosition () {
+      this.$refs.body.resetScrollPosition()
+    },
     syncActiveItemWithPath (path, items) {
       for (const item of items) {
         if (item.childItems) {
@@ -224,6 +227,7 @@ export default {
           )]
         ),
         h('NLayout', {
+          ref: 'body',
           props: {
             'mode': 'absolute',
             'use-native-scrollbar': false,