1

我有这段代码，当它们的 ID 放在 hrefs 中时，它会滚动到特定元素（这里是演示）：

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

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

4

1 回答 1

1

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

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

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

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

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

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

希望这可以帮助那里的任何人！

于 2013-01-28T17:58:45.790 回答