如何创建一个HTML按钮，其作用类似于同一页面上的项目的链接？
如何创建一个HTML按钮，其作用类似于同一页面上的项目的链接？
提问于 2013-06-29 09:05:43
我想创建一个HTML按钮，作为一个链接到同一页上的项目。因此，当您单击该按钮时，它会重定向到同一页面上的项目。
我该怎么做呢？(我会将解决方案限制在HTML、CSS和JavaScript上，因为目前我没有使用任何其他语言)
当前按钮(引导)：
<a class="btn btn-large btn-primary" href="">Democracy</a>回答 7
Stack Overflow用户
回答已采纳
发布于 2013-06-29 09:38:00
这是假设您不是在讨论向下滚动到常规锚点，而是希望滚动到页面上的实际HTML元素。
我不确定Bootstrap对你来说算不算，但如果你用的是jQuery，我想它是算数的。如果是这样，您可以绑定到按钮的"click“事件，并在其中放置一些javascript代码来处理滚动。通常，您可以使用"data“属性(例如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>Stack Overflow用户
发布于 2013-06-29 09:33:05
尝试：
<button onclick="window.location.href='location'">Button Name</buttonStack Overflow用户
发布于 2013-06-29 09:34:08
嘿，试试这个：-
<button><a href="#A">Click Me</a></button>然后在你的站点中找到你想要去的地方：
你可以把下面这行放在你想要的任何地方，
<a name="A"></a>希望它能为你工作
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17375708
复制相关文章
相似问题
腾讯云开发者
