单击弹出窗口会滚动回页面顶部 [Bootstrap and Django]

Question

我正在使用带有 Django 的引导程序，到目前为止一切正常。 但是，我正在尝试使用弹出窗口功能，但一直遇到问题。 每当单击我的弹出窗口时，页面都会滚动回顶部......但是弹出窗口确实出现了。 这是我的代码：

//////////<..... a lot more HTML ....>//////////
<div class="bs-docs-example">
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" id="testpop" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
{% endblock %}


{% block js %}
{{ block.super }}

{% bootstrap_javascript_tag "modal" %}
{% bootstrap_javascript_tag "alert" %}
{% bootstrap_javascript_tag "tooltip" %}
{% bootstrap_javascript_tag "popover" %}

<script type="text/javascript">
$("#testpop").popover();
</script>

非常感谢！

Answer 1

您可以通过阻止anchor元素的默认操作来解决此问题：

$('a#testpop').on('click', function(e) {e.preventDefault(); return true;});

Answer 2

删除href =“＃”标签，它应该可以工作。

Answer 3

您可以将href =“ javascript：//”添加到锚标记。

Answer 4

这也可能是由于弹出框内有一个具有autofocus=on的元素（在chrome中测试）

Answer 5

我正在使用Bootstrap 2.3.2

重点不是点击。 即使我以编程方式调用show popover，它也会将我向上滚动到顶部。

重点是引导工具提示显示功能。 那里有一行：

$tip.detach().css({ top: 0, left: 0, display: 'block' })

它在拆下笔尖时应用显示块，只是为了获得其高度和宽度。 这是一个形而上的问题！ 看不见的元素没有高度！ 为了解决这个问题，我在该行中添加了注释：

$tip.show();

在获得位置的行之后：

pos = this.getPosition()

它对我有用。

Answer 6

我在Bootstrap v3.3.2中遇到了相同的问题，并通过使用按钮而不是锚标签解决了该问题。

然后，我返回到Bootstrap文档 ，发现除了那里提供的一个弹出窗口示例以外，所有示例都使用按钮-令人惊讶的是-确实使用了锚点的示例却忽略了href属性！

Answer 7

您可以将href="#..."替换为data-target="#..."

Answer 8

只需添加onclick="return false;" 到锚元素