Question

我的页面上有几个按钮，<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>：

$("#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;
});

这是JavaScript：

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

这是我的研究：

Article 1

任何帮助都将不胜感激。

更新

from bs4 import BeautifulSoup 
import requests 
page = requests.get('https://forums.spacebattles.com/threads/the-wizard-of-woah-and-irrational-methods-of-irrationality.337233/page-2')
page_source = page.content
soup = BeautifulSoup(page_source)
post = soup.body.find('div', 'messageContent')
user_name = post.find('div', 'attribution type')
if 'Harry Leferts' in user_name:
    '''save the post '''

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

Answer 1

首先在标题中正确提及元素。它是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>

Answer 2

常规修复

请勿对按钮使用＆lt; a＆gt; -Tags。将＆lt; a＆gt; -Tags转换为＆lt; button＆gt; -Tags或其他内容（span，p等）

<强>解释

这很简单。你的＆lt; a＆gt; -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 3

这是因为一个href开始于＆＃34;＃＆＃34;跳转到该id的元素。例如，href="#mydiv"跳转到ID为＆＃34; mydiv＆＃34;的元素。（如果该元素不存在则没有任何反应，因此这可能是一种解决方案）。如果没有提供id（即你的案例; href="#"），它会跳转到页面顶部。我的解决方案是在click处理程序中添加一个preventDefault，其中＆＃34;否定＆＃34;现有行为。可以这样做：

＆＃13;

$('.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.

＆＃13;

body {
    height: 5000px;
    padding: 50px;
}

.buttons {
    position: fixed;
    bottom: 0;
}

.button, .button-x {
    display: inline-block;
    padding: 20px;
    background: #fff;
}

＆＃13;

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

＆＃13;

重要的部分是e.preventDefault()，它是阻止锚标记的初始行为的函数。您所要做的就是将其放在点击处理程序中的某个位置。确保通过＆＃34; e＆＃34;作为参数。

Answer 4

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

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

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

您是否尝试过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>

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

按钮onClick使页面跳转到页面顶部

6 个答案: