Почему не происходит прокрутка страницы до якоря?

Question

[Sergey Nikolaev]

Vue приложение, используется роутер, mode: 'history'
На главной странице перебором массива отрисовываются router-link с:to="{path: '/page', hash: '#'+item}"

На другой странице содержатся компоненты с обычным текстом. В начале каждого текста заголовок с id с соответствующим значением item из ссылки, что отрисовываются на главной.

При клике по ссылке, происходит переход на другую страницу, а вот прокрутка до расположения "якоря" не происходит. Точнее страница прокручивается лишь до середины.

Если же ссылки расположена на самой другой странице, например вверху, то переход по "якорям" происходит (прокрутка до их расположения).

Предполагаю, что это связано с тем, что содержимое компонентов не успевает отобразиться (заполнить пространство на странице определенной высоты, равной содержимому компонента) к моменту срабатывания прокрутки до "якоря".
Так же пробовал в роутер добавлять метод scrollBehavior, изменений не наблюдалось.

Буду благодарен за любые предложения реализации данной задачи.

Comments

[Sergey Nikolaev]

Содержимого достаточно, минимум 1,5 экрана в высоту. Если просто перейти на эту страницу, и в адресной строке браузера добавлять значения якорей после символа #, то работает, с любым якорем. Проблема именно после перехода с других страниц.

Answer 1

[Sergey Nikolaev]

В итоге помогли две вещи:
1. В файле router оставил метод

scrollBehavior() {
    return { x: 0, y: 0 }
  }

чтобы при любых переходах страница отображалась сверху;

2. На самой странице (/page) в mounted() написал

let elem = document.querySelector(this.$route.hash)
elem.scrollIntoView({ block: 'start', behavior: 'smooth' })

Но все же странно, что решение в документации ко vue-router не захотело у меня работать...

scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return { selector: to.hash }
    } else {
      return { x: 0, y: 0 }
    }
  }

Answer 2

[xenonhammer]

обычный javascript, поможет : нужно вычислить положение относительно документа высоту якоря, при клики давать это значение текущему положению.
https://learn.javascript.ru/onscroll