Javascript 锚元素onClick使页面跳转到页面顶部

我的页面上有几个按钮，单击它们可以显示或隐藏一些元素

元素位于页面底部，因此需要滚动到那些

元素

每当我点击一个按钮，页面就会跳到顶部。那么，我如何创建一个锚，以便当用户单击按钮时，它将停留在页面的该部分

以下是其中一个按钮：

<p class="text-center"><a id="Button-1" class="btn btn-default" href="#" role="button">View Details</a></p>

以下是我的研究：

任何帮助都将不胜感激

更新

<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></p>

---

当我点击按钮时。。我向下滚动以查看出现的div。。然后单击另一个按钮（看起来与上面完全相同），页面返回顶部。

将

a

标记的href属性更新为

javascript:void（）




javascript:void（）它不会让链接导航到任何地方
 首先在标题中正确提及元素。它是一个
a
而不是
按钮

下一步：当您单击
标签时，默认情况下，
标签中的
#
会将您带到页面顶部

在
href
属性中使用
javascript:void（）
，以克服此问题

像

示例代码段



某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
r> 某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物

我建议您使用一种更通用的不同方法。易于使用和维护

对每个按钮只使用一个
类
，以检测点击。并将要显示的元素存储在
data
属性中


$（“.btn节”）。单击（函数（）{
var classToShow=$（this）.data（“类显示”）；
$（“.section”）.hide（）；
$（“+classToShow）.show（）；
});
部分{
显示：无；
}
.内容{
宽度：100%；
高度：2000px；
背景色：#ccc；
}

大量内容
第一节
第一节
第一节
第一节
第二节
第3节一般修复

不要使用

或者一个id（HTML5）

马上就来

由于您未指定片段或未使用正确的片段，浏览器将滚动到页面顶部。
您是否尝试过此解决方案

您可以在锚点上使用此功能：

function goToAnchor(anchor) {
  var loc = document.location.toString().split('#')[0];
  document.location = loc + '#' + anchor;
  return false;
}

用法：

<a href="#anchor" onclick="goToAnchor('anchor')">Anchor</a>



请注意，锚点需要用引号括起来，而不带哈希前缀。
这是因为以“#”开头的href跳转到该id的元素。例如，
href=“#mydiv”
跳转到id为“mydiv”的元素（如果该元素不存在，则不会发生任何事情，因此这可能是一个解决方案）。如果没有提供id（即您的案例；
href=“#”
），它会跳到页面顶部。我的go-to解决方案是向click处理程序添加一个preventDefault，它“否定”现有行为。可以这样做：


$（'.button'）。单击（函数（）{
$（'#lastclicked'）.text（this.textContent）；
});
$（'.button-x'）。单击（函数（e）{//将事件传递给函数以允许使用“防止默认”函数。
e、 预防默认值（）；
$（'#lastclicked'）.text（this.textContent）；
});
//单击每个按钮，注意前两个按钮如何跳到顶部的任何一个div，但第三个按钮（“button-x”）不会移动任何东西。
正文{
高度：5000px；
填充：50px；
}
.按钮{
位置：固定；
底部：0；
}
.button、.button-x{
显示：内联块；
填充：20px；
背景：#fff；
}

上次单击：
仍然跳转到页面顶部问题可能是因为当div切换为隐藏时。。那么这一页适合所有的东西。。我的意思是，由于切换到显示的div，页面实际上扩展了。我可能误解了您的问题；为我工作，可扩展所有按钮！谢谢你的回复。不确定“防止所有默认设置”会产生什么影响，但它现在已经完成了这项工作！
<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></p>

<a name="top">This is the top section</a>
<a href="#top">Jump to top</a>

<div id="my-section">Coming soon</div>
<a href="#my-section">Jump to my-section</a>

function goToAnchor(anchor) {
  var loc = document.location.toString().split('#')[0];
  document.location = loc + '#' + anchor;
  return false;
}

<a href="#anchor" onclick="goToAnchor('anchor')">Anchor</a>