jQuery 单击弹出窗口滚动回页面顶部 [Bootstrap 和 Django]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12590523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clicking a popover scrolls back to top of the page [Bootstrap and Django]
提问by abisson
I am using bootstrap with Django and so far everything as worked. However, I am trying to use the popover functionality, and I keep running into a problem. Whenever a click my popover, the page scrolls back to the top... BUT the popover do appear. here is my code:
我正在使用 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>
Thanks a lot!
非常感谢！
回答by dokkaebi
You can solve that by preventing the default action of the anchor element:
您可以通过阻止锚元素的默认操作来解决这个问题：
$('a#testpop').on('click', function(e) {e.preventDefault(); return true;});
回答by Alvaro Sifuentes Rojas
Remove the href="#"tag, it should work.
删除href="#"标签，它应该可以工作。
回答by Florin Dobre
You can add href="javascript://" to the anchor tag.
您可以将 href="javascript://" 添加到锚标记。
回答by Peter Ehrlich
This can also be cause by having an element with autofocus=onwithin the popover (tested in chrome)
这也可能是因为autofocus=on在弹出窗口中有一个元素（在 chrome 中测试）
回答by Luiz Feij?o Veronesi
I'm using Bootstrap 2.3.2
我正在使用 Bootstrap 2.3.2
The point is not about clicking. Even if I call show popover programatically, it scrolls me up to the top.
重点不在于点击。即使我以编程方式调用 show popover，它也会将我滚动到顶部。
The point is on bootstrap tooltip show function. There is a line there:
重点在于引导工具提示显示功能。那里有一行：
$tip.detach().css({ top: 0, left: 0, display: 'block' })
$tip.detach().css({ top: 0, left: 0, display: 'block' })
It applies the display block when detaching tip just to get its height and width. This is a metaphysical question! Invisible elements do not have a height!! To fix this I commented that line and added:
它在分离尖端时应用显示块只是为了获得它的高度和宽度。这是一个形而上学的问题！隐形元素没有高度！！为了解决这个问题，我评论了该行并添加了：
$tip.show();
Just after the line where it gets a position:
就在它获得位置的那一行之后：
pos = this.getPosition()
It worked to me.
它对我有用。
回答by Ahmer Kureishi
I encountered the same problem with Bootstrap v3.3.2 and solved it by using buttons instead of anchor tags.
我在 Bootstrap v3.3.2 中遇到了同样的问题，并通过使用按钮而不是锚标签来解决它。
I then went back to Bootstrap docsand found that all but one of the popover examples given there use buttons - and surprise surprise - the one that does use the anchor leaves out the href attribute!
然后我回到Bootstrap 文档，发现除了那里给出的弹出框示例之一之外，所有示例都使用按钮 - 令人惊讶的是 - 使用锚点的示例省略了 href 属性！
回答by Christian Barreto
You can replace href="#..."with data-target="#..."
您可以替换href="#..."为data-target="#..."
