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

Question

我的页面上有几个按钮，onclick 它们显示或隐藏了一些 <div> 元素。

<div> 元素位于页面底部，因此需要滚动到这些 <div> 元素。

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

这是其中一个按钮：

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

这是点击上方按钮时出现的<div>：

<div class="row">
    <div id="Section-1" class="col-md-10">
        <p>The section to appear.</p>
    </div>
</div>

这里是 JavaScript：

$("#Button-1").click(function () {
    $("#Section-2").hide();
    $("#Section-3").hide();
    $("#Section-1").toggle("show");
    $("#Button-1").text(function(i, text) {
        return text === "View Details" ? "Hide Details" : "View Details";
    });
    return false;
});

这是我的研究：

Article 1

任何帮助将不胜感激。

更新

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

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

Answer 1

这是因为以“#”开头的 href 会跳转到该 id 的元素。例如，href="#mydiv" 跳转到 id 为“mydiv”的元素（如果该元素不存在，则不会发生任何事情，因此这可能是一个解决方案）。在没有提供 id 的情况下（即您的情况；href="#"），它会跳转到页面顶部。我的首选解决方案是将 preventDefault 添加到单击处理程序，它“否定”现有行为。可以这样做：

$('.button').click(function() {
	$('#lastclicked').text(this.textContent);
});

$('.button-x').click(function(e) { // Passes the event to the function to allow the prevent default function.
	e.preventDefault();
	$('#lastclicked').text(this.textContent);
});

// Click each of the buttons and notice how the first two jumps to either the div of the top, but the third button ("button-x") doesn't move anything.

body {
    height: 5000px;
    padding: 50px;
}

.buttons {
    position: fixed;
    bottom: 0;
}

.button, .button-x {
    display: inline-block;
    padding: 20px;
    background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
    <a href="#" class="button">Link with href="#"</a>
    <a href="#mydiv" class="button">Link with href="#mydiv"</a>
    <a href="#" class="button-x">Link with href="#", but a preventDefault.</a>
</div>
<div id="mydiv">
    Last clicked: <span id="lastclicked"></span>
</div>

重要的部分是e.preventDefault()，它是阻止锚标记初始行为的函数。你所要做的就是把它放在你的点击处理程序中的某个地方。确保将“e”作为参数传递。

Answer 2

您是否尝试过 http://stackoverflow.com/questions/11815295/javascript-inline-onclick-goto-local-anchor 的这个解决方案

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

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

用法：

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

注意，锚点需要用引号括起来，没有哈希前缀。

Answer 3

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

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

$(".btn-section").click(function(){
  var classToShow = $(this).data("class-show");
  $(".section").hide();
  $("." + classToShow).show();
});

.section{
display:none;
}

.content{
width:100%;
height:2000px;
background-color:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Lot of content</div>
<button class="btn-section" data-class-show="section1">Section 1</button>
<button class="btn-section" data-class-show="section2">Section 1</button>
<button class="btn-section" data-class-show="section3">Section 1</button>

<div class="section section1">Section 1</div>
<div class="section section2">Section 2</div>
<div class="section section3">Section 3</div>

这也解决了你的问题。

Answer 4

一般修复

不要在按钮上使用 -Tags。将 -Tags 转换为 -Tags 或其他东西（span、p 等）

说明

这很简单。您的 -Tags（即按钮）链接到“#”，即所谓的 URI 片段部分。

通常片段是由名称标识的 HTML 标记（HTML5 之前）

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

或一个 id (HTML5)

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

由于您没有指定片段或没有使用正确的片段，浏览器将滚动到页面顶部。

Answer 5

将a标签的href属性更新为javascript:void();

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

Demo

javascript:void(); 它不会让链接导航到任何地方。

Answer 6

首先在标题中正确提及元素。它是a 而不是button。

下一步：a 标签中的# 默认会在您点击时将您带到页面顶部。

在href 属性中使用javascript:void() 来克服这个问题。

点赞<a href='javascript:void();'>something</a>

示例 sn-p

<div>

  Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>

  <a href='javascript:void();'>this</a>
</div>