From 00aeff62e700cabf65d5c67828bd419c015558e6 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Sat, 15 May 2021 12:15:31 +0100 Subject: [PATCH] fix(vue-app): respect `scroll-margin-top` when navigating with hash (#9187) --- packages/vue-app/template/router.scrollBehavior.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/vue-app/template/router.scrollBehavior.js b/packages/vue-app/template/router.scrollBehavior.js index 2650db696b..b6828d3faa 100644 --- a/packages/vue-app/template/router.scrollBehavior.js +++ b/packages/vue-app/template/router.scrollBehavior.js @@ -66,9 +66,15 @@ export default function (to, from, savedPosition) { hash = '#' + window.CSS.escape(hash.substr(1)) } try { - if (document.querySelector(hash)) { + const el = document.querySelector(hash) + if (el) { // scroll to anchor by returning the selector position = { selector: hash } + // Respect any scroll-margin-top set in CSS when scrolling to anchor + const y = Number(getComputedStyle(el)['scroll-margin-top']?.replace('px', '')) + if (y) { + position.offset = { y } + } } } catch (e) { <%= isTest ? '// eslint-disable-next-line no-console' : '' %>