fix(vue-app): respect scroll-margin-top when navigating with hash

[danielroe]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)

Description

This PR checks whether there is a scroll-margin-top and uses that value as offset when scrolling to the element when navigating via hash navigation, e.g. <NuxtLink to="/about#heading-3">About</NuxtLink>.

closes #9135

Checklist:

• All new and existing tests are passing.

[codecov-commenter]

Codecov Report

Merging #9187 (200556d) into dev (8e2cad5) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #9187   +/-   ##
=======================================
  Coverage   65.10%   65.10%           
=======================================
  Files          94       94           
  Lines        4098     4098           
  Branches     1121     1121           
=======================================
  Hits         2668     2668           
  Misses       1152     1152           
  Partials      278      278           

Flag	Coverage Δ
unittests	65.10% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8e2cad5...200556d. Read the comment docs.

[vinderman]

Hi everyone! Is it planned to support this feature on ios 11-14? These versions dont support scroll-margin-top, using snap-scroll-margin-top instead.

[awacode21]

@danielroe is this fix still available for nuxt 3 ?? i am working on latest version 3.7.4 but scroll-margin-top is ignored so my anchor links with fixed header are not working because of nuxt.

[danielroe]

I would welcome a PR to implement it.

[awacode21]

@danielroe I followed your request and wanted to implement a fix. So I analysed the Nuxt code at this point and found that it already works. I just must not set the scroll-margin-top to :target, but directly to the element. Because :target is only set in the browser in the initial load with anchor, and subsequently, not with other anchors. So I adjusted my code and it is working.