8

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

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

当前按钮（引导程序）：

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

7 回答 7

8

尝试：

<button onclick="window.location.href='location'">Button Name</button
于 2013-06-29T01:33:05.303 回答
4

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

我不确定 jQuery 是否适合您，但如果您使用的是 Bootstrap，我想它可以。如果是这样，您可以绑定到按钮的“单击”事件，并在其中放置一些 JavaScript 代码来处理滚动。通常，您可以使用“数据”属性（例如 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>
于 2013-06-29T01:38:00.433 回答
3

嘿试试这个：-

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

然后你想在你的网站上去哪个地方： -
你可以把下面的行放在你想要的任何地方，

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

希望对你有帮助

于 2013-06-29T01:34:08.237 回答
0

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

于 2017-12-19T19:07:26.750 回答
0 
<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>
于 2020-03-04T02:51:09.550 回答
-1

试试下面的代码：

<button><a href="#Link">Click Over Here</a></button>

那么你想在你的网站中去哪个地方，你可以把下面的行放在你想要的任何地方：

<a name="Link"></a>
于 2020-03-04T06:33:00.967 回答
-2

这是最简单的方法

 <a href="link.html"> <button type="button""> Click </button>  </a>
于 2016-06-22T05:06:22.833 回答