点击Bootstrap的popover自动回滚置顶问题

在a链接中使用popover,当a链接处于窗口需下拉滚动条的位置时,点击popover后内容自动往上滚至顶部。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content.">
  Dismissible popover
a>

<td>
  <a href='#' data-toggle='popover' data-trigger='focus' data-placement='top' title='这是标题' data-content='这是内容'>
    单元格-可点击元素
  a>
td>

 

这其实是a链接中的href="#"标签的锚点效果。

有人说:Remove the href="#" tag, it should work.

移除href="#"之后,页面不置顶了,但是popover也失效了。因为Bootstrap的popover是包装在a标签内的,还有其他方式吗?好像没有了,官方示例都是将a装饰成按钮。

既然知道是href="#"的锚点属性导致的,那就好办了。

You can solve that by preventing the default action of the anchor element.

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

 这样a链接就不会跳转了。

转载于:https://www.cnblogs.com/monsino/p/11465292.html

你可能感兴趣的:(点击Bootstrap的popover自动回滚置顶问题)