Javascript scroll to sections and also scroll to section but open relevant nav-tab


Joined
Feb 25, 2022
Messages
3
Reaction score
1
Hi

I have a nav menu that has links in it that scroll to the relevant section which does seem to work but also got other links in the same nav menu that scroll to the relevant section but also has nav-tabs tab-pane code in that I would like to open when click on the link, for example I have the following code in the nav menu
HTML:
<nav id="nav">
                                    <div id="bs-example-navbar-collapse-1">
                                        <ul class="menus" id="mainMenu">
                                            <li><a href="#home" class="parent-link scrolllink">Home</a></li>
                                            <li><a href="#about" class="parent-link scrolllink">About</a></li>
                                            <li><a data-toggle="tab" href="#sideglass" class="parent-link scrolllinktwo" aria-controls="#sideglass">Side Glass</a></li>
                                            <li><a data-toggle="tab" href="#glassreardoors" class="parent-link scrolllinktwo" aria-controls="#glassreardoors">Glass Rear Doors</a></li>
                                            <li><a data-toggle="tab" href="#doorhandleslocks" class="parent-link scrolllinktwo" aria-controls="#doorhandleslocks">Door Handles &amp; Locks</a></li>
                                            <li><a data-toggle="tab" href="#gasstruts" class="parent-link scrolllinktwo" aria-controls="#gasstruts">Gas Struts</a></li>
                                            <li><a href="#contact" class="parent-link scrolllink">Contact</a></li>
                                        </ul>
                                        <div id="mobileMenu"></div>
                                    </div>
                                </nav>

I would like the Home link to scroll to the home section of the webpage and the Glass Rear Doors link for example to scroll to the section where the tabs are but to also open the tab-pane for Glass Rear Doors to show the relevant content

I got the following code so far, it kind of works but is messy as I have to click on the Glass Rear Door link twice in the nav menu and each one scrolls up that bit further

My nav tab code is below

HTML:
<ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="sideglass-tab" data-toggle="tab" href="#sideglass" role="tab" aria-controls="sideglass" aria-selected="true"><i class="flaticon-battery"></i>Side Glass</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="glassreardoors-tab" data-toggle="tab" href="#glassreardoors" role="tab" aria-controls="glassreardoors" aria-selected="false"><i class="flaticon-break"></i>Glass Rear Doors</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="doorhandleslocks-tab" data-toggle="tab" href="#doorhandleslocks" role="tab" aria-controls="doorhandleslocks" aria-selected="false"><i class="flaticon-seat-belt"></i>Door Handles &amp; Locks</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="gasstruts-tab" data-toggle="tab" href="#gasstruts" role="tab" aria-controls="gasstruts" aria-selected="false"><i class="flaticon-settings"></i>Gas Struts</a>
                </li>
            </ul>

<div class="tab-content">
                <div class="tab-pane fade show active" id="sideglass" role="tabpanel" aria-labelledby="sideglass-tab">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="single-service">
                                <i class="flaticon-battery"></i>
                                <h3>Side Glass</h3>
                                <p>
                                    Tell us what your car needs or ask for a diagnostic. Receive a free, fast, fair & transparent price quote.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="glassreardoors" role="tabpanel" aria-labelledby="glassreardoors-tab">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="single-service">
                                <i class="flaticon-battery"></i>
                                <h3>Glass Rear Doors</h3>
                                <p>
                                    Tell us what your car needs or ask for a diagnostic. Receive a free, fast, fair & transparent price quote.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

The javsacript is below

JavaScript:
<script>
    $('#bs-example-navbar-collapse-1 a.scrolllinktwo[data-toggle="tab"]').click(function(e) {
      e.preventDefault()
      $("#myTab [href=" + e.target.hash + "]").tab('show')
    });

    $('a.scrolllinktwo[data-toggle="tab"]').on('shown.bs.tab', function(e) {
      var divId = $(e.target).attr("href")
      $('html,body').animate({
        scrollTop: $(divId).offset().top
      }, 500);
    });
    
    $('a.scrolllink, a.scrolllinktwo').click(function(event){
        event.preventDefault()
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 300
    }, 500);
    return false;
});
    
  </script>
 
Ad

Advertisements

Joined
Mar 3, 2021
Messages
243
Reaction score
29
The problem appears to be that your shown.bs.tab function is never being called. Try changing your selector:

JavaScript:
   $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
      var divId = $(e.target).attr("href")
      $('html,body').animate({
        scrollTop: $(divId).offset().top
      }, 500);
    });
 
Joined
Feb 25, 2022
Messages
3
Reaction score
1
Thank you really appreciate it, I did it a slightly different way and looks to be working
 
Ad

Advertisements

Joined
Feb 25, 2022
Messages
3
Reaction score
1
For my curiosity and future readers, what was your solution?
No probs, I did it the following way


HTML:
<li><a href="#link2" class="parent-link scrolllink" data-tab="glassreardoors">Glass Rear Doors</a></li>


HTML:
<ul class="nav nav-tabs" id="my-tab-link" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="glassreardoors-tab" data-toggle="tab" href="#glassreardoors" role="tab" aria-controls="glassreardoors" aria-selected="false"><i class="flaticon-settings"></i>Glass Rear Doors</a>
    </li>
</ul>

<div class="tab-content" id="my-tab-content">
    <div class="tab-pane fade show active" id="glassreardoors" role="tabpanel" aria-labelledby="glassreardoors-tab">
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="single-service">
                    <i class="flaticon-battery"></i>
                    <h3>Glass Rear Doors</h3>
                    <p>
                        There are 3 different designs.
                        <br><br>
                        Fully framed rear doors come colour coded to the overall colour of the pick-up top and are normally available as a single piece of glass that is bonded into the frame. All the hinges , handles and ancillary items are attached to the frame and not the glass.
                        <br><br>
                        Semi framed rear doors normally have a black fiberglass bottom, weather strip or an internal strengthening section and the handles - door locks - hinges - gas struts are attached directly through the glass.
                        <br><br>
                        Frameless rear doors have no internal strengthening and no external fiberglass or weather strip. The hinges, gas struts and handles are attached through or directly on the glass.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>


JavaScript:
<script>
    $('a.scrolllink').click(function() {
        /**
         * check to see if we are targeting sub tabs
         */
        if ($(this).attr('href') === "#link2") {
            scrollLink($(this).attr('data-tab'));
        }

        /**
         * smooth scrolling to section
         */
        $('html, body').animate({
            scrollTop: $($(this).attr('href')).offset().top
        }, 500);
        return false;
    });
</script>



JavaScript:
/**
 *
 * @param {*} tab tab id used to set active tab
 */
function scrollLink(tab) {
    /**
     * removing active class from all nav links
     */
    $("#my-tab-link")
        .find(".nav-link")
        .each(function (index, element) {
            $(element).removeClass("active");
        });

    /**
     * removing active class from all tab content
     */
    $("#my-tab-content")
        .find(".tab-pane")
        .each(function (index, element) {
            $(element).removeClass("active");
            $(element).removeClass("show").removeClass("active");
        });

    /**
     * setting active class for nav tab-content
     */
    $("#" + tab)
        .addClass("show")
        .addClass("active");

    /**
     * set active calss for navlink
     */
    $("#" + tab + "-tab").addClass("active");
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top