Question

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

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

将数据切换从“按钮”更改为“按钮”可以使滚动工作，但无法明显地切换按钮，因此效果不佳。

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

看来，用于onclick事件的Bootstrap函数正在执行某些操作，使我的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行以使其正常工作）

Answer 1

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

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

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

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

demo

Answer 2

这似乎适用于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的同时发生变化有关。

为什么未调用window.scrollTo（）？

2 个答案: