Question

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

我该怎么做？（我会将解决方案限制为HTML，CSS和JavaScript，因为目前我没有使用任何其他语言）

当前按钮（引导程序）：

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

Answer 1

尝试：

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

Answer 2

嘿试试这个： -

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

然后你想去你的网站： - 您可以将该行放在您想要的任何位置

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

希望它适合你

Answer 3

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

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

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

要使用实际滚动到相应元素的代码，请查看以下文章：

How to go to a specific element on page?

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

Answer 4

这是一种简单的方法

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

Answer 5

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

Answer 6

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

Answer 7

尝试以下代码：

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

然后您要在站点中的任何地方 u可以将行放置在您想要的地方下方：

<a name="Link"></a>

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

7 个答案: