如何创建一个HTML按钮,就像链接到同一页上的项目一样?

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

我怎样才能做到这一点? (我会限制解决方案为HTML,CSS和JavaScript,因为目前我没有使用任何其他语言)

当前按钮(Bootstrap):

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

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

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

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

有关用于实际滚动到相应元素的代码,请参阅以下文章:

如何去页面上的特定元素?

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

尝试:

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

嘿试试这个: -

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

那么你想要在你的网站去哪个地方: -
你可以把线放在你想要的任何地方,

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

希望对你有帮助

链接地址: http://www.djcxy.com/p/6231.html

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

下一篇: How to make an HTML back link?