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

Question

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

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

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

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

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

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

Answer 1

https://stackoverflow.com/questions/42645964/vue-js-anchor-to-div-within-the-same-component https://router.vuejs.org/ru/guide/advanced/scroll-behavior.html

думаю тут вы найдете то что ищете)

Answer 2

В итоге помогли две вещи:

В файле router оставил метод

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

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

На самой странице (/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 3

Столкнулся с похожей проблемой. В моем случае ответ оказался прост. В Vue Router 4 формат возвращаемого объекта из scrollBehavior() изменился по сравнению с тем, что было в Vue Router 3. В частности, свойство объекта selector теперь называется el, как показано в документах:

    scrollBehavior(to, from, savedPosition) {
        if (to.hash) {
            return ({
                el: to.hash,
                behavior: 'smooth',
            })
        } else if (savedPosition) {
            return (savedPosition);
        } else {
            return {left: 0, top: 0}
        }
    },

БЛОГ НА HUSL

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

Ответы (3 шт):