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"]')

次に行うことは、以下のように、各アンカーリンクにHTML5属性を配置することです。

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

これが誰かに役立つことを願っています！

于 2013-01-28T17:58:45.790 に答える