3

私は中小企業向けのサイトを開発しています。1ページのWebサイトのスムーズスクロールスクリプトでブートストラップを使用しています。

問題は、個々のサービスに関する情報をタブ付きのペインに表示する必要があることですが、これはスムーズ スクロール スクリプトと競合しています。つまり、タブをクリックするとブラウザが異常終了します。Smoothscroll スクリプトを無効にすると、タブは正常に機能します。両方の機能を使用できる方法はありますか?

現在使用しているスムーズ スクロール スクリプトはこれです... CSS-tricks.com から取得

<script>
$(function() {

    function filterPath(string) {
        return string
        .replace(/^\//,'')
        .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
        .replace(/\/$/,'');
    }

    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('html', 'body');

    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
    $('a[href*=#]').each(function() {

        // Ensure it's a same-page link
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
            && (location.hostname == this.hostname || !this.hostname)
            && this.hash.replace(/#/,'') ) {

                // Ensure target exists
                var $target = $(this.hash), target = this.hash;
                if (target) {

                    // Find location of target
                    var targetOffset = $target.offset().top;
                    $(this).click(function(event) {

                        // Prevent jump-down
                        event.preventDefault();

                        // Animate to target
                        $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {

                            // Set hash in URL after animation successful
                            location.hash = target;

                        });
                    });
                }
        }

    });

    // Use the first element that is "scrollable"  (cross-browser fix?)
    function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i <argLength; i++) {
            var el = arguments[i],
            $scrollElement = $(el);
            if ($scrollElement.scrollTop()> 0) {
                return el;
            } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop()> 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                    return el;
                }
            }
        }
        return [];
    }

});
</script>
4

2 に答える 2

5

この行：

$('a[href*=#]').each(function() {

次のものに置き換えてみてください：

$('a[href*=#]:not([data-toggle="tab"])').each(function() {
于 2014-02-09T14:32:55.293 に答える
1

data-toggle="pill"タブ付きメニューに使用するので、置き換えます

$('a[href*=#]').each(function() {

と 

$('a[href*=#]:not([data-toggle="pill"])').each(function() {

それはうまくいきます。

于 2016-04-27T16:11:55.223 に答える