时间戳

首页 > 解决方案 > Javascript：切换自动向上或向下滚动

javascript - Javascript：切换自动向上或向下滚动

问题描述

我有一个页面，其中包含一个按钮和两个位于页面底部附近的单选按钮。我的目标是创建一个由向上或向下滚动页面的按钮触发的功能，具体取决于两个单选按钮是否处于活动状态。一旦用户选择了这两个单选按钮，按钮就会滚动到页面顶部。提供的代码段包含我到目前为止的代码。一旦激活了两个单选按钮，我希望“向下滚动”代码不再起作用，只需让按钮将用户移动到页面顶部。它在本示例和 Firefox 中按预期工作，但 chrome 和 edge 无法解释它。在这些浏览器中，页面在顶部时会滚动到底部，考虑到“向下滚动”代码位于函数的开头，这是有道理的。

function Push() {
    window.scrollTo(0,document.body.scrollHeight);
    if(mode1.checked) {
        if(mode2.checked) {
            window.scrollTo({top: 0});
}}}
<style>
  html {
    height: 500px;
  }
</style>

<body>

</br></br></br></br></br></br></br></br></br></br></br>

<div align="center">
  <button id="button01" onclick="Push()">Push</button>
</div>

</br></br></br></br></br></br></br></br></br></br></br></br>

<div align="center">
  <form id="mode">
    <label><input type="radio" id="mode1"/></label>
    <label><input type="radio" id="mode2"/></label>
  </form>
</div>

</body>

标签： javascripthtmlfunctionbuttonscroll

解决方案

你写它的方式；当两个无线电都被选中并调用 Push() 函数时，页面将先滚动到底部，然后再滚动到顶部。它发生得如此之快，你没有注意到它（至少我没有注意到），但代码说这正在发生。

编辑：我确实通过在 codepen 中通过设置断点来测试证明了这一点：window.scrollTo({top: 0});. 当它在这里中断时，它滚动到底部，然后当我进入下一个函数调用时，它滚动到顶部。

我会像这样更改 Push() 函数：

    function Push() {
        if(mode1.checked && mode2.checked) {
            window.scrollTo({top: 0});
        } else {
            window.scrollTo(0,document.body.scrollHeight);
        }
    }

这样做只会触发一个滚动动作（向上或向下）。

似乎 IE 也不支持scrollTo像您在此处所做的那样使用 with 选项：window.scrollTo({top: 0});. 最好用window.scrollTo(0,0)。我在下面的片段中使用了它。 这也可能是您的 Chrome 和 Edge 问题，具体取决于您正在测试的每个版本。看到这个：https ://caniuse.com/#feat=element-scroll-methods

最后一个值得注意的观察：由于单​​选按钮的设计功能，您目前无法“取消选中”单选按钮。我假设你知道这不是问题，但我想我会提到它。如果需要，使用复选框或自定义复选框将允许您完成此操作。还有其他方法可以实现这一点。 

function Push() {
    if(mode1.checked && mode2.checked) {
        window.scrollTo(0,0);
    } else {
        window.scrollTo(0,document.body.scrollHeight);
    }
}
html {
    height: 500px;
  }
<html>

<body>

</br></br></br></br></br></br></br></br></br></br></br>

<div align="center">
  <button id="button01" onclick="Push()">Push</button>
</div>

</br></br></br></br></br></br></br></br></br></br></br></br>

<div align="center">
  <form id="mode">
    <label><input type="radio" id="mode1"/></label>
    <label><input type="radio" id="mode2"/></label>
  </form>
</div>

</body>
</html>

推荐阅读