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

[ianhaney1]

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

<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

<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

<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>

[rpg_digital]

Hi,

I think it would be a good idea if you could provide a cut-down working example, maybe on codepen, jsfiddle or whatever. You know with some styling, just to get a better picture of what you are trying to achieve.

I have been playing around with the following. I don’t think it’s quite what you want, but follows the idea of clicking a link, scrolling to target and that target then opening.

I opted to use an intersection observer. On clicking the menu link it finds the target link in the DOM, observes it and then scrolls into view. Once in view it triggers the tab opening with the addition of a class ‘show’. It then stops observing that link.

It’s far from perfect, but here you go.

[Archibald]

Do you want something like this?

Note: sections have been made narrow to help demonstrate scrolling.

[PaulOB]

@rpg_digital

I think it would be a good idea if you could provide a cut-down working example, maybe on codepen, jsfiddle or whatever. You know with some styling, just to get a better picture of what you are trying to achieve.

It looks like that code is part of a bootstrap4 page and I would guess that this is the basic setup.

That might help you make a solution geared to this setup.

The tabs and panes themselves are controlled automatically by the bootstrap functions I just added a css scroll and activated the tabs from the top menu. I did not check for a url hash but there is a tutorial here.

Bear in mind my JS is very basic

The examples by @rpg_digital and @Archibald are much better if bootstrap can be avoided.

[ianhaney1]

Thank you really appreciate it, I did it a slightly different way and looks to be working

[rpg_digital]

@PaulOB

It looks like that code is part of a bootstrap4 page and I would guess that this is the basic setup.

I think you’re spot on there @PaulOB