From 04f67f16bc2af903a0d4d82670d9a95ebd6a73df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Sat, 4 Jan 2020 20:10:29 +0800
Subject: [PATCH] docs: improve anchor scrolling

---
 docs/markdown/quickstart.en-US.md       |  2 +-
 docs/markdown/quickstart.zh-CN.md       | 20 ++++++++++----------
 docs/markdown/style-guide.zh-CN.md      |  2 +-
 docs/markdown/theme.zh-CN.md            |  6 +++---
 packages/vant-cli/site/desktop/main.js  | 11 ++---------
 packages/vant-cli/site/desktop/utils.js | 19 +++++++++++++++++++
 src/locale/README.zh-CN.md              |  2 +-
 7 files changed, 37 insertions(+), 25 deletions(-)
 create mode 100644 packages/vant-cli/site/desktop/utils.js

diff --git a/docs/markdown/quickstart.en-US.md b/docs/markdown/quickstart.en-US.md
index c9d31cc93..bb959459d 100644
--- a/docs/markdown/quickstart.en-US.md
+++ b/docs/markdown/quickstart.en-US.md
@@ -2,7 +2,7 @@
 
 ### Starter kit
 
-We recomment to use [Vue Cli 3](https://cli.vuejs.org/zh/) to create a project.
+We recomment to use [Vue Cli](https://cli.vuejs.org/zh/) to create a project.
 
 ```bash
 # Install Vue Cli
diff --git a/docs/markdown/quickstart.zh-CN.md b/docs/markdown/quickstart.zh-CN.md
index 0dc60dc9e..1a0a41bdd 100644
--- a/docs/markdown/quickstart.zh-CN.md
+++ b/docs/markdown/quickstart.zh-CN.md
@@ -2,7 +2,7 @@
 
 ### 脚手架
 
-推荐使用 Vue 官方提供的脚手架 [Vue Cli 3](https://cli.vuejs.org/zh/) 创建项目
+推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/) 创建项目
 
 ```bash
 # 安装 Vue Cli
@@ -105,7 +105,7 @@ import 'vant/lib/index.css';
 Vue.use(Vant);
 ```
 
-> 注意：配置 babel-plugin-import 插件后，将不允许以这种方式导入组件
+> 配置按需引入后，将不允许直接导入所有组件
 
 ### 方式四. 通过 CDN 引入
 
@@ -120,14 +120,14 @@ Vue.use(Vant);
 <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
 
 <script>
-  // 在 #app 标签下渲染一个按钮组件
-  new Vue({
-    el: '#app',
-    template: `<van-button>按钮</van-button>`
-  });
+// 在 #app 标签下渲染一个按钮组件
+new Vue({
+  el: '#app',
+  template: `<van-button>按钮</van-button>`
+});
 
-  // 调用函数组件，弹出一个 Toast
-  vant.Toast('提示');
+// 调用函数组件，弹出一个 Toast
+vant.Toast('提示');
 </script>
 ```
 
@@ -158,7 +158,7 @@ module.exports = {
 }
 ```
 
-> 注意：在配置 postcss-loader 时，应避免 ignore node_modules 目录，这会导致 Vant 的样式无法被编译
+> 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译
 
 ### 在桌面端使用
 
diff --git a/docs/markdown/style-guide.zh-CN.md b/docs/markdown/style-guide.zh-CN.md
index ae2c1706c..05fd8be6b 100644
--- a/docs/markdown/style-guide.zh-CN.md
+++ b/docs/markdown/style-guide.zh-CN.md
@@ -2,7 +2,7 @@
 
 ### 介绍
 
-在参与 Vant 开发时，请遵守约定的单文件组件风格指南，指南内容节选自 [Vue 官方风格指南](https://cn.vuejs.org/v2/style-guide)
+在参与 Vant 开发时，请遵守约定的单文件组件风格指南，指南内容节选自 [Vue 官方风格指南](https://cn.vuejs.org/v2/style-guide)。
 
 ### 组件数据
 
diff --git a/docs/markdown/theme.zh-CN.md b/docs/markdown/theme.zh-CN.md
index b9f96e1fd..d7afbdc1e 100644
--- a/docs/markdown/theme.zh-CN.md
+++ b/docs/markdown/theme.zh-CN.md
@@ -2,7 +2,7 @@
 
 ### 介绍
 
-Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法
+Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法。
 
 ### 示例工程
 
@@ -25,7 +25,7 @@ Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置
 
 ## 定制方法
 
-### 步骤一. 引入样式源文件
+### 步骤一 引入样式源文件
 
 定制主题时，需要引入组件对应的 Less 样式文件，支持按需引入和手动引入两种方式。
 
@@ -60,7 +60,7 @@ import 'vant/lib/index.less';
 import 'vant/lib/button/style/less';
 ```
 
-### 步骤二. 修改样式变量
+### 步骤二 修改样式变量
 
 使用 Less 提供的 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 即可对变量进行修改，下面是参考的 webpack 配置。
 
diff --git a/packages/vant-cli/site/desktop/main.js b/packages/vant-cli/site/desktop/main.js
index e5573f4b9..f3437235f 100644
--- a/packages/vant-cli/site/desktop/main.js
+++ b/packages/vant-cli/site/desktop/main.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import App from './App';
 import { router } from './router';
+import { scrollToAnchor } from './utils';
 
 if (process.env.NODE_ENV !== 'production') {
   Vue.config.productionTip = false;
@@ -10,15 +11,7 @@ new Vue({
   el: '#app',
   mounted() {
     if (this.$route.hash) {
-      // wait page init
-      setTimeout(() => {
-        const el = document.querySelector(this.$route.hash);
-        if (el) {
-          el.scrollIntoView({
-            behavior: 'smooth'
-          });
-        }
-      }, 1000);
+      scrollToAnchor(this.$route.hash);
     }
   },
   render: h => h(App),
diff --git a/packages/vant-cli/site/desktop/utils.js b/packages/vant-cli/site/desktop/utils.js
new file mode 100644
index 000000000..5db855c0f
--- /dev/null
+++ b/packages/vant-cli/site/desktop/utils.js
@@ -0,0 +1,19 @@
+export function scrollToAnchor(selector) {
+  let count = 0;
+
+  const timer = setInterval(() => {
+    const el = document.querySelector(selector);
+    if (el) {
+      el.scrollIntoView({
+        behavior: 'smooth'
+      });
+      clearInterval(timer);
+    } else {
+      count++;
+
+      if (count > 10) {
+        clearInterval(timer);
+      }
+    }
+  }, 100);
+}
diff --git a/src/locale/README.zh-CN.md b/src/locale/README.zh-CN.md
index 84fe516b7..7200b729a 100644
--- a/src/locale/README.zh-CN.md
+++ b/src/locale/README.zh-CN.md
@@ -2,7 +2,7 @@
 
 ### 介绍
 
-Vant 默认采用中文作为语言，如果需要使用其他语言，可以参考下面的方案
+Vant 默认采用中文作为语言，如果需要使用其他语言，可以参考下面的方案。
 
 ### 多语言切换