要滚动时如何防止页面加载

Question

有一个按钮，单击该按钮时，它将滚动到页面底部

<form action="#demo-section">
        <button id="demo"   >demo</button>

它与该div链接如下：

<div  id="demo-section" >

但是当我单击一个页面时，它会刷新，然后移至底部，并且呢？在地址栏中： http://xxxx.xx/?#demo-section

Answer 1

如果未提及“ type”属性，则表单元素内的所有按钮均充当type =“ submit”。因此，只需将type =“ button”添加到按钮，它将起作用。

编辑：（正如Mike'Pomax'Kamermans在他的评论中建议的那样），如果这是您要实现的表单，则最好使用锚标记并将其样式设置为按钮。.

Answer 2

如前所述，您应该将type属性添加到值为"button"的按钮上，以便更改

<button id="demo"   >demo</button>

到

<button id="demo" type="button">demo</button>

应该按预期工作。

此外，您还可以调查是否需要使用锚标记（<a>）并将href属性设置为#demo-section而不是使用form 。这将具有相同的效果，但是不必将元素设置为按钮（也不必具有包装纸形式-表单并非用于导航，正如Mike'Pomax'Kamermans的评论所提到的那样，因此最正确的方法是可能就是这个）。

上述方法的示例：

<a href="#demo-section">demo</a>

这将显示为带有文本“ demo”的超链接，但可以更改为任何其他内容，包括其他HTML元素，因此比使用表单和按钮更加灵活（您也可以使用CSS设置锚标签的样式，因此如果需要，它甚至可以成为按钮。