通过href与Bootstrap模式冲突滚动到元素答案

【问题标题】：Scroll to Element through href conflicts with Bootstrap modals通过href与Bootstrap模式冲突滚动到元素
【发布时间】：2013-01-28 17:44:53
【问题描述】：

当它们的 ID 放在 href (demo here) 中时，我有这段代码会滚动到特定元素：

$('a[href*=#]:not([href=#])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
                || location.hostname == this.hostname) {

                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top - 125
                    }, 1000);
                    return false;
                }
            }
        });

问题是，我认为它与 Bootstrap JS 组件冲突，尤其是模态。现在，打开我的模态似乎不像以前那样工作了：

链接：

<a href="#myModal" role="button" class="btn btn-primary btn-large" data-toggle="modal">Sign-up for Beta!</a>

JS：

 $('#myModal').modal({
                keyboard: true,
                show: false,
                backdrop: 'static'
            });

元素：

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>

谁能帮我解决这个冲突？任何建议将不胜感激。谢谢！

【问题讨论】：

标签： javascript jquery twitter-bootstrap modal-dialog scrolltop

【解决方案1】：

我实际上通过反复试验找到了答案。

我注意到第一行 $('a[href*=#]:not([href=#])') 实际上会查找所有锚元素，这有点糟糕。通过对 HTML 5 数据属性的一些研究，我得到了它的工作：

替换：$('a[href*=#]:not([href=#])')

与：$('[data-toggle="elementscroll"]')

接下来要做的是在每个锚链接上放置 HTML 5 属性，如下所示：

<a href="#Seamless" data-toggle="elementscroll">Seamless</a>

希望这对任何人都有帮助！

【讨论】：

感谢您发布解决方案 AnimaSola。我遇到了同样的问题，这个解决方案对我有用。