主页 / 问题 / 991393
Accepted
Виктор Тюрин
Asked:2020-06-10 22:41:02 +0000 UTC2020-06-10 22:41:02 +0000 UTC

平滑滚动阻止vue js

  • 772

我正在尝试在 vue js 上创建一个“锚点”，但没有任何反应 1）导航菜单本身位于一个标题类 2）接下来是 4 个块（其中一个在主类中，其余在 div ) 您需要确保当您从导航菜单中单击链接时，可以平滑滚动到该块。我这样做： ... <li><button type="button" @click="scrollTo('services')">Услуги</button></li> ... 挑战 ... ...

代码

var anchor = new Vue({
  methods: {
    scrollTo(refName) {
      var element = this.$refs[refName];
      var top = element.offsetTop;
      window.scrollTo(0, top);
    }
  }
})

我点击链接 - 它不起作用。更不用说平滑滚动

PS 另外，当屏幕在活动块上时，您需要使链接更改颜色

vue.js

2 个回答

  1. Best Answer

    演示视频：https ://yadi.sk/i/AZNoazQiMxcfpg

    链接到 js fiddle（简单版）：https ://jsfiddle.net/Nic34/5n4urv18/3/

    链接到 js fiddle（动画版）：https ://jsfiddle.net/Nic34/rcwauhm7/5/

    代码说明：

    async openSimpleSlide(number_slide){
    // Получение ссылки на элемент
    let slide = this.$refs[`slaid-${number_slide}`]
    // Определение расстояния от начала страницы до нужного элемента
    let top = window.scrollY + slide.getBoundingClientRect().y;
    // Перемотка
    window.scrollTo(0, top)
}

    该选项更复杂，但滚动流畅

    async openSlide(number_slide){
    // Получение ссылки на элемент
    let slide = this.$refs[`slaid-${number_slide}`]
    // Число циклов в анимации, ее качество
    let count = 100;
    // Определение раастояние от начала страницы до элемента
    let top = window.scrollY + slide.getBoundingClientRect().y;
    // Определение раастояние от начала страницы до элемента
    let start_top = window.scrollY;
    // Вычисление перемещения (скролла) за одну итерацию
    let delta = (top - window.scrollY) / 100;
    // Начало анимации
    for (let i=0;i<100; i++) {
        // Ожидание 1 секунды, деленного на качетсво анимации
        await new Promise(resolve => {
            window.setTimeout(function () {
                resolve()
            }, 1000 / count)
        })
        // Выполнение перемещения на значение delta с учетом текущего скролла
        window.scrollTo(0, start_top + delta)
    }
},
    • 2

  2. 一切都很简单。

    window.scrollTo({
    top: 1000,
    behavior: 'smooth'
});
    • 1

相关问题