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

How to create an HTML button that acts like a link to an item on the same page?

提问by itmilos

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>

采纳答案by Andy Mudrak

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-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”作为参数传递给您的函数，这样您就可以获得对链接的引用/button 元素调用它。

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>

回答by Mohammad Areeb Siddiqui

Try:

尝试：

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

回答by Anurag-Sharma

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

希望这对你有用

回答by Abdelhak Ohammou

This is the easy way to do it

这是最简单的方法

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

回答by Janet

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，在您要重定向到的同一页面上为您的项目添加书签。假设 id="itemId"，然后使用<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. 当您单击该按钮时，您将被重定向到包含该项目的页面部分。

回答by Vamsi Mudunuri

<a href="#sectionA">Read More</a>
<section id="sectionA">
    <p>You will be directed to this section. You can use id inside div/section/p tags etc</p>
</section>

回答by mohamed ibrahim

try this following code :

试试下面的代码：

<button><a href="#Link">Click Over Here</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="Link"></a>