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;