How to stop URL with hash from jumping to anchor?

Question

I've tried almost everyone's answer to similar problems and the answers haven't help me. So i'll post my codes and then explain a little more details of what is my problem.

Link to see codes in and editor.
http://jsbin.com/nudavoseso/edit?html,js,output

Code inside .html body.

<div class="tabs">
  <ul>
    <li><a href="#content1">Tab 1</a></li>
    <li><a href="#content2">Tab 2</a></li>
    <li><a href="#content3">Tab 3</a></li>
  </ul>
</div>
<div id="content1" class="content">
  <h1>One</h1>
  <p>Content goes here</p>
</div>
<div id="content2" class="content">
  <h1>Two</h1>
  <p>Content goes here</p>
</div>
<div id="content3" class="content">
  <h1>Three</h1>
  <p>Content goes here</p>
</div>

and code inside .js file.

function tabs() {
  $(".content").hide();
  if (location.hash !== "") {
    $(location.hash).fadeIn();
    $('.tabs ul li:has(a[href="' + location.hash + '"])').addClass("active");
  } else {
    $(".tabs ul li").first().addClass("active");
    $('.tabs').next().css("display", "block");
  }
}
tabs();

$(".tabs ul li").click(function() {
  $(".tabs ul li").removeAttr("class");
  $(this).addClass("active");
  $(".content").hide();
  var activeTab = $(this).find("a").attr("href");
  location.hash = activeTab;
  $(activeTab).fadeIn();
  return false;
});

Everything works great if you go check out the example url below.
http://output.jsbin.com/nudavoseso

The problem
If you go to the same url above with the hashtag #content1 at the end it jumps to anchor(#content1), I do not want the page to be jumping to anchor. I want the page to always start at the top. This only happens when it's a direct link to the url.
http://output.jsbin.com/nudavoseso#content1

Sorry this doesn't work with my codes. Plus I asked for a detailed answer of why this is happening and how to fix it. — Shak Daniel, May 02 '15 at 21:56
use a hash that is different than the ID and parse the hash yourself — charlietfl, May 02 '15 at 22:04
@charlietfl I stated above "the page must start at the top" if it's not clear I'll make an edit stating "the page must start at the top and not jump to anchor." — Shak Daniel, May 02 '15 at 22:06
@charlietfl the weird thing is when you click on the tabs it works fine and the page doesn't jump to anchor but only if you go to the direct url it behaves like that. I'me just trying to understand why this is happening also. — Shak Daniel, May 02 '15 at 22:16
possible duplicate of [How can I remove the location hash without causing the page to scroll?](http://stackoverflow.com/questions/2295845/how-can-i-remove-the-location-hash-without-causing-the-page-to-scroll) — Wex, May 02 '15 at 23:26
_“the weird thing is when you click on the tabs it works fine […]”_ – that’s not weird, but only natural, since the click handler for these links cancels their default action; but when it is triggered “from the outside” via URL, there is nothing at that point that could be canceled. — CBroe, May 02 '15 at 23:32
The problem is that that's how web browsers behave. If you load a page with `#id` in the URL, it will automatically scroll to the element with that ID. — Uyghur Lives Matter, May 03 '15 at 00:53

score 1 · Answer 1 · answered May 02 '15 at 23:27

1

If you're willing to take a slight hit to your user's experience, you can detect when a hash exists and simply reload the page without the hash:

if (location.hash) {
  window.location = location.href.replace(location.hash, '');
}

answered May 02 '15 at 23:27

Wex

15,539
10
64
107

Note on your comment above about this question being a duplicate, I believe if someone asked a question 5 years ago shouldn't be a duplicate in web technology you should know how fast things are changing in the web world. Also that question wasn't detailed enough, to give me the answer I wanted. Thx for the help though, figured out my problem see below :) – Shak Daniel May 05 '15 at 19:34

score 1 · Accepted Answer · answered May 03 '15 at 15:34

THE FIX

html

<div class="tabs">
  <ul>
    <li><a href="#content1">Tab 1</a></li>
    <li><a href="#content2">Tab 2</a></li>
    <li><a href="#content3">Tab 3</a></li>
  </ul>
</div>
<div class="content content1">
    <p>1. Content goes here</p>
</div>
<div class="content content2">
    <p>2. Content goes here</p>
</div>
<div class="content content3">
    <p>3. Content goes here</p>
</div>

js

function tabs(){
  $(".content").hide();

  if (location.hash !== "") {
    $('.tabs ul li:has(a[href="' + location.hash + '"])').addClass("active");
    var hash = window.location.hash.substr(1);
    var contentClass = "." + hash;
    $(contentClass).fadeIn();
  } else {
    $(".tabs ul li").first().addClass("active");
    $('.tabs').next().css("display", "block");
  }
}
tabs();

$(".tabs ul li").click(function(e) {
  $(".tabs ul li").removeAttr("class");
  $(this).addClass("active");
  $(".content").hide();
  var contentClass = "." + $(this).find("a").attr("href").substr(1);
  $(contentClass).fadeIn();
  window.location.hash = $(this).find("a").attr("href");
  e.preventDefault();
  return false;
});

URL without any hash.
http://output.jsbin.com/tojeja

URL with hashtag that does not jumping to anchor.
http://output.jsbin.com/tojeja#content1

Thanks for your help, This is my solutions after fiddling with the codes. @charlietfl — Shak Daniel, May 05 '15 at 19:22

How to stop URL with hash from jumping to anchor?

2 Answers2

THE FIX