From 145be7a6ad7ca5a20862bf0034342fc7c4125e49 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Mon, 2 Jul 2018 17:02:21 +0800
Subject: [PATCH] =?UTF-8?q?anchor-link=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?scroll-offset=E5=B1=9E=E6=80=A7=EF=BC=8C=E4=BC=9A=E4=BC=98?=
 =?UTF-8?q?=E5=85=88=E4=BD=BF=E7=94=A8anchor-link=E7=9A=84=E8=BF=99?=
 =?UTF-8?q?=E4=B8=AA=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/routers/anchor.vue           |  4 ++--
 src/components/anchor/anchor-link.vue | 10 ++++++++--
 src/components/anchor/anchor.vue      |  8 +++++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/examples/routers/anchor.vue b/examples/routers/anchor.vue
index 6639ee96..783259b4 100644
--- a/examples/routers/anchor.vue
+++ b/examples/routers/anchor.vue
@@ -5,9 +5,9 @@
             <Button @click="andLink">添加一个连接</Button>
 			<Anchor :bounds="100" @on-change="handleChange" @on-select="handleSelect" :style="{right: '100px'}" :affix="true" :offset-top="30" :scroll-offset="100" :container="scrollCon" show-ink-in-fixed>
 				<AnchorLink v-if="(link - 1) % 30 === 0" v-for="link in 300" :key="`link${link}`" :href="`#title-${link}`" :title="`title-${link}`">
-                    <AnchorLink v-if="link === 61" href="#title-child-69" title="title-child-69"/>
+                    <AnchorLink :scroll-offset="20" v-if="link === 61" href="#title-child-69" title="title-child-69"/>
                 </AnchorLink>
-                <AnchorLink href="#lishi" title="李氏专跳"/>
+                <AnchorLink :scroll-offset="200" href="#lishi" title="李氏专跳"/>
                 <AnchorLink v-if="showNewLink" href="#new-link" title="这是动态添加的连接"/>
 			</Anchor>
 		</div>
diff --git a/src/components/anchor/anchor-link.vue b/src/components/anchor/anchor-link.vue
index 999609db..fc291be6 100644
--- a/src/components/anchor/anchor-link.vue
+++ b/src/components/anchor/anchor-link.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="anchorLinkClasses">
-        <a :class="linkTitleClasses" :href="href" :data-href="href" @click.prevent="goAnchor" :title="title">{{ title }}</a>
+        <a :class="linkTitleClasses" :href="href" :data-scroll-offset="scrollOffset" :data-href="href" @click.prevent="goAnchor" :title="title">{{ title }}</a>
         <slot></slot>
     </div>
 </template>
@@ -10,7 +10,13 @@ export default {
     inject: ['anchorCom'],
     props: {
         href: String,
-        title: String
+        title: String,
+        scrollOffset: {
+            type: Number,
+            default () {
+                return this.anchorCom.scrollOffset
+            }
+        }
     },
     data () {
         return {
diff --git a/src/components/anchor/anchor.vue b/src/components/anchor/anchor.vue
index 214f9c7e..bd664177 100644
--- a/src/components/anchor/anchor.vue
+++ b/src/components/anchor/anchor.vue
@@ -95,8 +95,14 @@ export default {
         },
         handleScrollTo () {
             const anchor = document.getElementById(this.currentId);
+            const currentLinkElementA = document.querySelector(`a[data-href="${this.currentLink}"]`);
+            let offset = this.scrollOffset;
+            if (currentLinkElementA) {
+                offset = parseFloat(currentLinkElementA.getAttribute('data-scroll-offset'));
+            }
+
             if (!anchor) return;
-            const offsetTop = anchor.offsetTop - this.wrapperTop - this.scrollOffset;
+            const offsetTop = anchor.offsetTop - this.wrapperTop - offset;
             this.animating = true;
             scrollTop(this.scrollContainer, this.scrollElement.scrollTop, offsetTop, 600, () => {
                 this.animating = false;