remain at top of page on anchor #link

Question

Im attempting to link to a page with a specific bootstrap nav-tabs open, I can achieve this simply by adding the tab id into a #link, eg:

www.mysite.com/apagewithtabs#tab2

This is great except for the page scrolls down to the where #tab2 appears, i'd like the user to be at the top of the page when it loads.

Ive tried many different variations of this following js/jquery but absolutely nothing is working for me.

$(document).ready(function () {
  window.setTimeout(function () {
    $('html,body').scrollTop(0);
  }, 2000);
});

If anyone has any ideas how I might be able to achieve this id really appreciate it!

Many thanks in advance!

score 1 · Accepted Answer · answered Jul 30 '16 at 02:29

1

After trying many different methods unbelievably this works:

www.mysite.com/apagewithtabs#tab2#top

Hope it helps someone!

answered Jul 30 '16 at 02:29

jimmywiddle

63
7

You should mark this answer as accepted, so more will be guaranteed to see it if they need help! – TrampolineTales Aug 02 '16 at 14:41

score 0 · Answer 2 · edited May 23 '17 at 12:14

I'd recommend appending the information you want via a query instead, like so:

www.mysite.com/apagewithtabs?tab=tab2

Then use this code to see what the tab query's value is:

function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

var tab = getUrlVars()["tab"]; //tab is now the value of the tab query

Partial code courtesy of this answer.

You can then check the value of the tab variable and open the whatever you desire based on what the value is. Example:

switch (tab) {
    case 'tab1': /*...open tab 1 code...*/ break;
    case 'tab2': /*...open tab 2 code...*/ break;
}

many thanks for your help, although still no luck here. Ive placed `` in the page but this is empty. Also currently I have no idea the js code to open a specific bootstrap tab? — jimmywiddle, Jul 29 '16 at 13:02

remain at top of page on anchor #link

2 Answers2