锚点元素的onClick事件会使页面跳转到页面顶部。

Question

锚点元素的onClick事件会使页面跳转到页面顶部。

javascriptjqueryhtml

22

我页面上有几个按钮，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;
});

这是我的研究:

文章1

任何帮助将不胜感激。

更新

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

当我点击按钮时，我会滚动到看到出现的div，然后再次点击另一个按钮（与上面完全相同的外观），页面会返回到顶部。

- Grizzly

可能是重复问题：当点击触发 JavaScript 的链接时，如何停止网页滚动到顶部？ - João Pimentel Ferreira

6个回答

7

这是因为以"#"开头的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”作为参数传递。

- Quangdao Nguyen

e.preventDefault(); 对我有用，并可扩展到所有按钮！感谢回复。不确定“阻止所有默认操作”会产生什么后果，但现在可以完成工作了！ - embulldogs99

1

通用修复

不要将<a>标签用作按钮。将<a>标签转换为<button>标签或其他标签（例如span，p等）。

解释

这很简单。您的<a>标签（即按钮）链接到“＃”，这是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>

由于您没有指定片段或者使用了错误的片段，浏览器会滚动到页面顶部。

- getjackx

1

你尝试过来自https://dev59.com/dmgt5IYBdhLWcg3wygab的解决方案吗？

你可以在锚点上使用这个函数：

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

使用方法：

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

请注意锚点需要用引号括起来，不要加上#前缀。

- Wiredo

在这种情况下，return false; 是做什么用的？ - Nelu

0

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

每个按钮只需使用一个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>

这也解决了你的问题。

- Alexis

我可能误解了你的问题。 - Alexis

0

将 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>

演示

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

- Amit Kumar

2

仍然跳转到页面顶部 - Grizzly

问题可能是因为当div被切换隐藏时，页面会自适应所有内容，我的意思是，由于被切换显示的div而导致页面实际上会延伸。 - Grizzly

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jones Joseph · Accepted Answer

首先，在标题中正确提及元素。它是一个 a 标签，而非 button。

接下来：你的 a 标签中的 # 默认情况下会在单击时将您带到页面顶部。

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

例如：<a href='javascript:void();'>something</a> 示例片段

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