How to stop URL with hash from jumping to anchor?

Deadly 提交于 2021-02-08 11:21:08

问题


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


回答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, '');
}



回答2:


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



来源:https://stackoverflow.com/questions/30007717/how-to-stop-url-with-hash-from-jumping-to-anchor

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!