jQuery Tabs Selected Tab Prevent Jump to top

Question

I'm using jQuery tabs, an click on a tab it add hash to the url

jQuery( "#tabs").tabs({
        activate: function(event, ui) {
            window.location.hash = ui.newPanel.attr('id');
        }
    });

problem is when i click on a tab it opens but it scroll and jump to top of the page

Normal tabs

When i click on tab

Anyone know how to fix this issue

Why you adding # in url... ? if add then it will jump to top anyhow — Smithiam, Apr 25 '19 at 05:13
The whole problem have nothing to do with JQuery UI Tabs at all. You are manually putting # and updating location hash which jumps to top of page. Look at this question to prevent that: https://stackoverflow.com/questions/4715073/window-location-hash-prevent-scrolling-to-the-top — Nawed Khan, Apr 25 '19 at 05:16

score 2 · Accepted Answer · answered Apr 25 '19 at 05:15

2

Try using history.pushState(). Check History Api docs

jQuery( "#tabs").tabs({
    activate: function(event, ui) {
        history.pushState(null, null, '#' + ui.newPanel.attr('id'));
    }
});

answered Apr 25 '19 at 05:15

User863

Thanks for the answer it worked fine but when i refresh the page hash tag seems removing, is there have a way to keep hash tag – Suneth Kalhara Apr 25 '19 at 05:29

1 Answers1