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

【问题标题】：Vanilla JS + VueJS: Scroll to top of div on button clickVanilla JS + VueJS：单击按钮时滚动到 div 顶部
【发布时间】：2018-10-11 12:33:35
【问题描述】：

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

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

按钮html：

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

而功能是：

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

滚动条似乎是为body 准备的。所以你可以这样做：

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

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

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

【讨论】：

单击下一步时是否要滚动到内容顶部？我对吗？ @madameFerry
是的，这是正确的。当用户单击“下一步”时，以下问题的顶部会隐藏在“进度”栏下方的视图中。当用户向下滚动查看按钮时会发生这种情况。还有其他想法吗？
我已经编辑了答案，因为您已将滚动条附加到 html 标签而不是 body @madameFerry

【解决方案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; }

【讨论】：