Question

我有这个代码，当他们的ID被放入hrefs（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组件冲突，尤其是模式。现在，打开我的模态似乎不像以前那样工作：

LINK：

<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>

任何人都可以帮我解决这个冲突吗？任何建议都将受到高度赞赏。谢谢！

Answer 1

我实际上通过一些试验和错误找到了答案。

我注意到第一行$（'a [href * =＃]：not（[href =＃]）'）实际上查找所有有点不好的锚元素。通过对HTML 5数据属性的一些研究，我得到了它的工作：

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

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

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

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

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

通过与Bootstrap模式的href冲突滚动到Element

1 个答案: