CODEWITHSUNDEEP
javascriptscrollanchor
DisgruntledGoat
DisgruntledGoat

Reputation: 72560

Activate URL anchor but don't scroll to it?

I have a page with two tabs that I want to be able to switch with Javascript, but also set the anchor (e.g. page.html#tab1) in the URL for bookmarking/linking.

By default the tab contents are in two divs, one below the other, and the anchor tag will scroll to the correct one, with JS disabled.

With JS enabled, CSS classes are applied to make them act as tabs. Each tab links to each anchor, but when you click to switch tabs, the page scrolls to the tab. If I return false from the onclick function then the URL doesn't change to include the anchor.

How do I make the browser URL change to page.html#tab1 but not scroll to #tab1 ??

Upvotes: 6

Views: 5151

Answers (6)

Arno van Oordt
Arno van Oordt

Reputation: 3520

I found a nice solution here: http://lea.verou.me/2011/05/change-url-hash-without-page-jump/

Use a preventDefault on for example a click event

$('a').click((event) => {
    event.preventDefault();
    let hash = $(event.target).attr('href');
    history.pushState(null, null, hash);
    // The url now has a hash but the page won't jump to the given anchor
    // .. handle the rest (an easing scroll for example)
});

Upvotes: 0

devsnd
devsnd

Reputation: 7722

A quick hack:

var thehash = e.target.hash;
$(thehash).prop('id',thehash.substr(1)+'-noscroll');
window.location.hash = e.target.hash;
$(thehash+'-noscroll').prop('id',thehash.substr(1));

This changes the id of the html element before and after changing the hash of the url. Works for me, but might as well break something. This prevents the browser from scrolling on a hash change, since there is not html element with that id in between.

Upvotes: 1

Josh Stodola
Josh Stodola

Reputation: 82513

var Namespace = {
  var timer, scroll;
}

// Onclick
Namespace.scroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
Namespace.timer = setInterval(function() { scrollTo(0, Namespace.scroll) }, 100);
location.hash = this.href;
clearInterval(Namespace.timer);

Upvotes: 0

Tom Ritter
Tom Ritter

Reputation: 101400

I've played with this for a while, because I initially didn't believe you (I use the jQuery history plugin to get similar behavior).

And I'm stumped. I don't think you can. What you could do, as a workaround, is use javascript to set the hash to something DIFFERENT from what is actually on the page. And then use javascript upon load to read the hash and populate the correct content. I do this on my site. So in that scenario, users without javascript would be scrolled, users with javascript would keep the history chain, and it only gets wacky when people without send links to people with (or vice-versa).

Upvotes: 5

Alec
Alec

Reputation: 869

Could you have some Javascript that changed the anchor names, set window.location.hash, and then changed the anchor names back?

(I've confirmed that andynormancx is right, and setting window.location.hash scrolls the view, but I'm too lazy to test if creating an anchor in the DOM to window.location.hash also scrolls.)

Upvotes: 0

Jani Hartikainen
Jani Hartikainen

Reputation: 43253

window.location.hash = 'tab1';

might work.

Upvotes: -1

Related Questions