如何创建一个 HTML 按钮，它就像指向同一页面上的项目的链接？

Question

我想创建一个 HTML 按钮，它就像一个指向同一页面上的项目的链接。因此，当您单击该按钮时，它会重定向到同一页面上的项目。

我怎样才能做到这一点？ （我会将解决方案限制为 HTML、CSS 和 JavaScript，因为目前我没有使用任何其他语言）

当前按钮（引导程序）：

 <a class="btn btn-large btn-primary" href="">Democracy</a>

原文由 itmilos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是假设您不是在谈论向下滚动到常规锚点，而是要滚动到页面上的实际 HTML 元素。

我不确定 jQuery 是否适合您，但如果您使用的是 Bootstrap，我想它确实如此。如果是这样，您可以绑定到按钮的“单击”事件，并在其中放置一些 javascript 代码来处理滚动。通常，您可以使用“数据”属性（例如 data-scroll=“my-element-id”）将链接/按钮与要滚动到的元素相关联。

如果没有 jQuery，您将不得不创建一个包含所描述代码的函数，并放入一个引用您的函数的 onclick 属性，并将“this”作为参数传递给您的函数，这样您就可以获得对链接的引用/调用它的按钮元素。

对于用于实际滚动到相应元素的代码，请查看这篇文章：

如何转到页面上的特定元素？

没有 jQuery 的快速示例：

 <a class="scrollbutton" data-scroll="#somethingonpage"
 onchange="scrollto(this);">something on page</a>

<div id="somethingonpage">scrolls to here when you click on the link above</a>

<script type="text/javascript">
    function scrollto(element) {
        // get the element on the page related to the button
        var scrollToId = element.getAttribute("data-scroll");
        var scrollToElement = document.getElementById(scrollToId);
        // make the page scroll down to where you want
        // ...
    }
</script>

使用 jQuery：

 <a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>

<div id="somethingonpage">scrolls to here when you click on the link above</a>

<script type="text/javascript">
    $(".scrollbutton").click(function () {
        // get the element on the page related to the button
        var scrollToId = $(this).data("scroll");
        var scrollToElement = document.getElementById(scrollToId);
        // make the page scroll down to where you want
        // ...
    });
</script>

注意：如果你真的想要一个“按钮”而不是一个“链接”，你真的可以使用任何元素并使其可点击，例如：

 <button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>

原文由 Andy Mudrak 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试：

 <button onclick="window.location.href='location'">Button Name</button

原文由 Mohammad Areeb Siddiqui 发布，翻译遵循 CC BY-SA 3.0 许可协议