Cancel page scroll when using hash in links.

Question

I made tabs with jQuery. And I need to be able to link to exact tab. It's done.(code below) Problem I faced is that I can't prevent page scroll after switching the tabs. How can I disable scroll but still use hash?

<ul class="tabs group">
    <li>
    <a id="komp-link" class="switch" href="#komplekti">Komplekti</a>
    </li>
    <li>
    <a id="intern-link" class="switch" href="#internets">Internets</a>
    </li>
    <li>
    <a id="iptv-link" class="switch" href="#iptelevizija">IP Televizija</a>
    </li>
</ul>

<div id="komplekti">content 1</div>
<div id="internets">content 2</div>
<div id="iptelevizija">content 3</div>

// Tabs Switch

 $('#komp-link').click(function(){
        $('#komplekti').show();
        $('#internets').hide();
        $('#iptelevizija').hide();
    });
    $('#intern-link').click(function(){
        $('#komplekti').hide();
        $('#internets').show();
        $('#iptelevizija').hide();
    });
    $('#iptv-link').click(function(){
        $('#komplekti').hide();
        $('#internets').hide();
        $('#iptelevizija').show();
    });

// Enable linking to exact Tab

if(window.location.hash) {

        var getHash = window.location.hash;
        console.log(getHash)
        $(getHash).show();
    }

I found similar question but I didn't understand how to implement it in my case... Here it is [link](http://stackoverflow.com/questions/1489624/modifying-document-location-hash-without-page-scrolling) — Alex, Aug 23 '13 at 18:10

score 1 · Answer 1 · answered Aug 23 '13 at 18:00

Use event.preventDefault():

$('#komp-link').click(function(e){
    e.preventDefault();
    //...
});

You should be able to simplify your code though..

<ul class="tabs group">
    <li>
    <a id="komp-link" class="switch" href="#komplekti">Komplekti</a>
    </li>
    <li>
    <a id="intern-link" class="switch" href="#internets">Internets</a>
    </li>
    <li>
    <a id="iptv-link" class="switch" href="#iptelevizija">IP Televizija</a>
    </li>
</ul>

<div id="komplekti" class="tab">content 1</div>
<div id="internets" class="tab">content 2</div>
<div id="iptelevizija" class="tab">content 3</div>

...

$('.switch').click(function(e) {
    e.preventDefault();
    $('.tab').hide();
    $($(this).href()).show();
});

score 0 · Answer 2 · answered Aug 24 '13 at 09:24

0

Ok so I found decision. Best & easiest way is to use Bens Almans jQ plugin - hashchange event.

answered Aug 24 '13 at 09:24

Alex

283
1
2
12

Cancel page scroll when using hash in links.

2 Answers2