CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
yinshiro
yinshiro

Reputation: 159

Bootstrap - after clicking link, switch to tab and move to anchor

What i'm trying to achieve: After clicking on a link (inside a tab), switch to another tab and move to a specific part of the page (like a anchor).

What i got working is switching to the tab after clicking on the link, but it won't scroll down to the anchor point.

Help is really appreciated!

Code:

<div class="tab-content">
    <div class="tab-pane active in" id="A">
        <a data-tab-destination="tab-B" href="#bag-in-box">Bag-in-Box</a>
    </div>

    <div class="tab-pane fade" id="B">
        ...
        <div id="bag-in-box"> <!-- This is where it needs to scroll to -->
            <p>Bag-in-Box</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $("a[data-tab-destination]").on('click', function(e) {
            e.preventDefault();
            // Works
            var tab = $(this).attr('data-tab-destination');
            $("#" + tab).click();

            // Doesn't work
            var hashtag = $(this.hash);
            var target = hashtag.length ? hashtag : $('[name=' + this.hash.slice(1) + ']');

            if (target.length) {
                $('html, body').animate({scrollTop: target.offset().top}, 1000);
                return false;
            }
        });
    });
</script>

Upvotes: 2

Views: 1374

Answers (1)

T.Shah
T.Shah

Reputation: 2768

The other tab that is holding the anchor tag, remove class "fade" and add class "active" to it like this.

    <script type="text/javascript">
    $(function() {
        $("a[data-tab-destination]").on('click', function(e) { 
            e.preventDefault();
            // Works
            var tab = $(this).attr('data-tab-destination');

            $("#" + tab).click();

            // Doesn't work
            var hashtag = $(this.hash);

            var target = hashtag.length ? hashtag : $('[name=' + this.hash.slice(1) + ']');

            if (target.length) {
                $("#B").removeClass("fade").addClass("active");
                $('html, body').animate({scrollTop: target.offset().top}, 1000);
                return false;
            }
        });
    });
</script>

Upvotes: 3

Related Questions