社区首页 >问答首页 >Javascript:切换自动滚动或向下滚动

问Javascript:切换自动滚动或向下滚动
EN

Stack Overflow用户

提问于 2020-07-23 07:47:24

回答 1查看 871关注 0票数 1

我有一个页面，包含一个按钮和两个单选按钮放置在页面底部附近。我的目标是创建一个由按钮触发的函数，该按钮根据两个单选按钮是否处于活动状态，向上或向下滚动页面。一旦用户选择了两个单选按钮，按钮就会滚动到页面的顶部。所提供的代码片段具有我到目前为止所拥有的代码。一旦两个单选按钮被激活，我希望‘向下滚动’代码不再工作，让按钮将用户移动到页面的顶部。在这个例子和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>

function

button

scroll

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-23 08:00:27

编写它的方式；当检查两个收音机并调用Push()函数时，页面将首先滚动到底部，然后滚动到顶部。它发生得太快了，以至于你没有注意到(至少我没有)，但是代码说正在发生这种事情。

编辑：--我通过在这里设置一个断点：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 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>