时间戳

首页 > 解决方案 > 为什么没有调用 window.scrollTo() ？

javascript - 为什么没有调用 window.scrollTo() ？

问题描述

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

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

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

我尝试为复选框本身设置一个 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 行以查看它是否正常工作）

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

我不知道为什么它不起作用。Bootstrap 搞砸了。但是你可以很容易地绕过它，通过scrollTo使用setTimeout(func, 0).

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

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

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

演示

推荐阅读