0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[質問です] bootstrap の nav-tabs と collapse それとsmooth scroll を一緒に使いたい

Posted at

はじめまして。

bootstrapの nav-tabs と collapse と smooth scroll を
一緒に使おうと試みていますが、コンフリクトを起こしています。

使っているsmooth scrollは下記のスクリプトになります。

smooth-scroll.js
$(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*=#]:not([data-toggle="tab"]) {

        // 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 [];
    }

});

下記の箇所で tabクリック の場合は除くという処理ができているので

tabクリック除外箇所
$('a[href*=#]:not([data-toggle="tab"]) {

下記の様に書いて tab と collapse の場合は除くというようにしたいのですが
うまくいかず、この場合ですとcollapseの場合にはsmooth.scrollの影響が出てしまいます。

tabとcollapseクリック除外
$('a[href*=#]:not([data-toggle="tab"]) || $('a[href*=#]:not([data-toggle="collapse"]) {

tab と collapse と両方の場合に smooth scroll の影響を受けなくさせるには
どのようにしたらよいでしょうか?

よろしくお願いします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?