Question

我有一个使用VueJS创建的应用。它是一个多步表单，带有一个下一步按钮。您可以在此处查看运行的应用程序： https://staging.evbox.com/configurator.html

我要解决的问题是，一旦用户单击下一步按钮，就会看到以下问题的顶部。有人可以为我提供香草JS解决方案或一些建议吗？

按钮html：

  <button class="button-container__next" type="button" @click="goToNextStep()">Next</button>

函数是：

    goToNextStep: function () {
        this.currentStep++
}

Answer 1

似乎滚动条用于body。因此，您可以这样做：

goToNextStep: function () {
   this.currentStep++;
   window.scrollTo(0, 0);
}

如果主滚动条未附加到body，请尝试以下两行：

document.body.scrollTop = 0; // For safari
document.documentElement.scrollTop = 0;

Answer 2

我通过执行以下操作解决了该问题。我找到了这个脚本，但是老实说，我不确定它是如何工作的。有人可以向我解释吗？

goToNextStep: function () {
        this.currentStep++

        let myDiv = document.getElementById('wrapper');
        scrollTo(document.body, myDiv.offsetTop, 100);

        function scrollTo(element, to, duration) {
          if (duration < 0) return;
          var difference = to - element.scrollTop;
          var perTick = difference / duration * 2;

          setTimeout(function() {
            element.scrollTop = element.scrollTop + perTick;
            scrollTo(element, to, duration - 2);
          }, 10);
        }
      }

我还将其添加到CSS：

html { height: 100%; overflow:auto!important; }
body { height: 100%!important; }

Vanilla JS + VueJS：单击按钮滚动到div顶部

2 个答案: