如何创建一个HTML按钮，它的作用就像同一个页面上的一个条目的链接?

I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.

我想创建一个HTML按钮，它的作用就像同一个页面上的一个条目的链接。所以，当你点击按钮时，它会重定向到同一页面上的项目。

How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)

我该怎么做呢?(我将把解决方案限制在HTML、CSS和JavaScript上，因为目前我不使用任何其他语言)

Current Button (Bootstrap):

当前按钮(引导):

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

5 个解决方案

#1

This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.

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

I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").

我不确定jQuery是否对您有用，但是如果您使用Bootstrap，我想它会。如果是，您可以绑定到按钮的“单击”事件，并在那里放置一些javascript代码来处理滚动。通常，您可以使用“data”属性(例如data-scroll=“my-element-id”)将链接/按钮与要滚动到的元素关联起来。

Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.

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

For the code to use to actually scroll to the corresponding element, check out this article:

要查看用于实际滚动到相应元素的代码，请参阅本文:

How to go to a specific element on page?

如何访问页面上的特定元素?

Quick example without jQuery:

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

With jQuery:

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>

Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:

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

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

#2

Try:

试一试:

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

#3

hey try this : -

试试这个:-。

  <button><a href="#A">Click Me</a></button>

then to which ever place you want to go in your site : -
u may just place the line below wherever you want,

然后你想去你的网站的哪个地方:-你可以在你想去的任何地方，

  <a name="A"></a>

hope it works for you

希望对你有用

#4

This is the easy way to do it

这是最简单的方法

 <a href="link.html"> <button type="button""> Click </button>  </a>

#5

Bookmark your item on the same page that you want to redirect to by assigning it an id. Assume id="itemId", then use<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. When you click the button, you will be redirected to the part of the page containing that item.

假设id="itemId"，然后使用Democracy。当您单击按钮时，您将被重定向到包含该项目的页面的部分。

#1