为什么没有调用 window.scrollTo() ？答案

【问题标题】：Why is window.scrollTo() not being called?为什么没有调用 window.scrollTo() ？
【发布时间】：2019-10-26 05:32:04
【问题描述】：

我在自定义复选框上使用 Bootstrap 的按钮插件 toggle state 功能。当此按钮被切换（打开）时，隐藏元素应出现在页面顶部附近，然后页面应滚动到顶部。当按钮下一次切换（关闭）时，元素应该消失并且页面应该滚动到顶部。

当按钮被打开和关闭但滚动不起作用时，隐藏元素被切换。

将数据切换从“按钮”更改为“按钮”可以使滚动工作，但不会明显地切换按钮，所以这不好。

我尝试为复选框本身设置一个 onchange 事件，但它也不会滚动。

似乎 Bootstrap 的 onclick 事件函数正在做一些不允许我的 onclick 函数正常运行的事情。到目前为止，我无法理解它（我会继续尝试）。

为 window.scrollTo() 函数设置超时使其工作。为什么会这样？有没有办法在没有超时的情况下做到这一点？

<body>
    <div class="container">
        <div>
            <h3>Toggle Header and Scroll To Top</h3><hr />
            <h1 id="displayMe" class="d-none">Display Me</h1>
            <div style="height: 100vh;"></div>
            <div class="btn-group-toggle btn btn-success custom-control custom-switch" data-toggle="buttons" id="myButton">
                <input type="checkbox" class="custom-control-input" id="myCheckbox">
                <label class="custom-control-label" for="myCheckbox">Toggle and Scroll</label>
            </div>
        </div>
    </div>
    <script src="assets/jquery/jquery.min.js"></script>
    <script src="assets/twitter-bootstrap/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#myButton").on("click", toggleAndScroll);
        });

        function toggleAndScroll() {
            $('#displayMe').toggleClass('d-none');

            //setTimeout(function () {
                window.scrollTo(0, 0);
            //}, 100);
        }
    </script>
</body>

https://jsfiddle.net/ews9q50v/

（取消注释 setTimeout 行以查看它是否正常工作）

【问题讨论】：

标签： javascript jquery html css bootstrap-4

【解决方案1】：

这似乎适用于 chrome，但 Firefox 存在其他问题：

function toggleAndScroll() {
  $('#displayMe').toggleClass('d-none');

  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
}

但是由于您使用的是 jQuery，因此在 Firefox 和 chrome 中都可以使用这样的东西：

function toggleAndScroll() {
  $('#displayMe').toggleClass('d-none');
  $("html, body").animate({ scrollTop: 0 }, "slow");
}

我不完全确定问题出在哪里 - 可能与调用 scrollTo 的同时滚动高度发生变化有关。

【讨论】：

【解决方案2】：

我不知道为什么它不起作用。 Bootstrap 搞砸了。但是您可以通过使用setTimeout(func, 0) 将scrollTo 移动到事件循环的末尾来轻松绕过它。

$("#myButton").on("click", toggleAndScroll);

function toggleAndScroll() {
    $('#displayMe').toggleClass('d-none');

    setTimeout(function () {
        window.scrollTo(0, 0);
    }, 0);
}

demo

【讨论】：