如何创建一个HTML按钮,其作用类似于同一页面上项目的链接？

Question

我想创建一个HTML按钮,其作用类似于同一页面上项目的链接.因此,当您单击该按钮时,它会重定向到同一页面上的项目.

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

当前按钮(Bootstrap):

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

Answer 1

尝试:

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

Answer 2

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

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

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

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

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

没有 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>