如何创建一个HTML按钮，其作用类似于同一页面上项目的链接？ [英] How to create an HTML button that acts like a link to an item on the same page?

问题描述

我想创建一个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，CSS和JavaScript，因为目前我没有使用任何其他语言）

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

当前按钮（Bootstrap）：

Current Button (Bootstrap):

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

推荐答案

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

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.

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

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，你必须创建一个包含所描述代码的函数，并放入一个引用你的函数的onclick属性，并将this作为参数传递给你的函数，这样你就可以得到对调用它的链接/按钮元素。

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.

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

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

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

没有jQuery的快速示例：

Quick example without 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>

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

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>

这篇关于如何创建一个HTML按钮，其作用类似于同一页面上项目的链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！