0

I am using bootstrap tabs, with extra functionality of sticking the tab name in the location.hash so I can have users link directly to a tab and it will take you there on page load, so the adding the hash to the URL when changing tabs looks like:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    window.location.hash = $(e.target).attr("href").replace("#", "");
});

I saw here: https://stackoverflow.com/a/14560718/254257 how to change the location.hash without scrolling and was able to implement that on my tab links like so:

$(document).on("click", "a[href^='#'][data-toggle='tab']", function (event) {
    event.preventDefault();
    console.log("tab toggled click");
    history.pushState({}, "", this.href);
});

Cool, now when I click my link:

<li role="presentation" class="active"><a data-toggle="tab" href="#overview" role="tab">Overview</a></li>

No scroll jump occurs and my hash #overview gets added. However, I also have generic next and previous buttons alongside the list of tab links. Which markup is like:

    <a class="header-button wizard-previous-button" href="#" data-target-wizard-id="wizard1" title="Previous">
        <span class="header-button-text">Prev</span>
    </a>

    <a class="header-button wizard-next-button" href="#" data-target-wizard-id="wizard1"  title="Next">
        <span class="header-button-text">Next</span>
    </a>

that can also switch between tabs generically. On clicking the previous tab button for example, the following function runs:

function moveToPreviousTab(targetedWizard) {
    var $previousPaneLinkLi = $("#" + targetedWizard + " > .active").prev("li");
    var $previousPaneLinkA = $previousPaneLinkLi.find("a");
    $previousPaneLinkA.trigger('click');
}

And when I click it. I see in my console an additional "tab toggled click" as indicated in the code that's supposed to prevent scroll change. But the scroll jump still happens. I know the code to prevent scroll jump works, because without it, when I click the tab link directly, the scroll changes. So it seems like the only difference is the user clicking in the UI directly and it's working, while the other is JS triggering click on the element as a jquery object.

How can I get this to work and stop the scroll jump?

SventoryMang
  • 10,275
  • 15
  • 70
  • 113
  • 1
    I wonder if you need to preventDefault the click of the next and previous links. If you don't do that, those links are going to try to change your url to be just the # on the end. – Taplar Oct 13 '17 at 22:27
  • That did it, but why does it work like that? If I removed manually setting the location.hash, I could remove the whole history push state code block, and it works fine without trying to jump scroll. Even though the empty pound sign appears in the url. And the act of manually setting the hash doesn't even occur directly in the click event from next and previous. Write the answer and I'll mark it. – SventoryMang Oct 13 '17 at 22:50
  • 1
    I'm not entirely clear on what the the logic to prevent the scroll is doing, so this was just a passing observation that *might have* worked. I'll leave it to others to answer why it worked, heh. I'm not that hard up for points. So long as your problem was resolved, we're cool. – Taplar Oct 13 '17 at 22:59

0 Answers0