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 @@
-
+
-
+
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 @@
@@ -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;