Hash in Anchor Tags

hash in anchor tags

You need to put named anchors on page2.html, like so:

<a id="1"></a>
…
<a id="2"></a>
…
<a id="3"></a>

How do I link to part of a page? (hash?)

If there is any tag with an id (e.g., <div id="foo">), then you can simply append #foo to the URL. Otherwise, you can't arbitrarily link to portions of a page.

Here's a complete example: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Linking content on the same page example: <a href="#foo">Jump to #foo on same page</a>

It is called a URI fragment.

Make every anchor tag with hash (#) in href unclickabe

You can try setting the pointer-events property to none

a[href="#"]{
  pointer-events: none;
}

<a href="#">Example</a>
<br>
<a href="">Clickable Link Example</a>

Html anchor linking and hashbang, simple solution?

I started working on a solution very similar to @Liam Egan's, which is good, but I thought "What if someone wants to share a link to an anchor tag? I'll just try using both a hashbang and an anchor hash in the URL!".

After multiple tests, as it turns out, it's really hard to maintain, especially if you use an external library which uses the hash. It will break, so I abandoned that idea.

Here is a solution for clicks on links, which I tested on your website:

$(function(){
    $('a[href^="#"]').click(function(e){
        // Get the hashes in link
        var h = this.href.split('#');
        // If the first hash is not a hashbang or if there are several hashes
        if(h[1].indexOf('!') !== 0 || h.length > 2) {
            // Prevent default behavior of the link so it does not break the site
            e.preventDefault();
            // If the first hash is a hashbang (but there are multiple hashes),
            // only include the first one in the page URL
            if(h[1].indexOf('!') === 0) { window.location.hash = '#' + h[1]; }
            // Get the element with the right ID (last hash) and its scrolling container
            var el = $('#' + h.pop()), cont = el.closest('div[class^="scroll"]');
            // Scroll the scrolling container to that element after a delay,
            // because it does not work during the page transition
            setTimeout(function() {
                cont.scrollTop(0) // Reset it first to get the right position below
                    .scrollTop( el.position().top );
            },500);
        }
    });
});

I had to adapt it for two reasons:

• Not the whole document should scroll, just your wrapping .scroll div
• The scrolling won't work during page transition, so it needs a delay

It does not affect links such as #!/page_XXX, and will work with links such as #myID or #!/page_XXX#myID.

Finally, for simplicity, since you are using jQuery, I did too. Place that piece of code anywhere on your page after loading jQuery, and it should work.

The hash of id of an anchor link is to be replaced with a slash in URL

Its great that you are using HTML5.

The goodies which this great 5th version of HTML has bestowed upon us include the History API

With this API you can change the page URL (within the same domain) without redirecting/reloading.

The function is pushState.

-Relfor

Sole hash in anchor href?

Exactly. What you see here is somehow bad design (although it is quite common to use href="#").

What it actually will do is jumping to the top of the page if the default action is not prevented.

Much better would be to

• use a <button> and style it accordingly (maybe even only inserted via JavaScript)
• or let the link point to some real resource (that triggers some action on the server side) and attach the JavaScript event handler to do this (or similar) action on the client and prevent following the link (keyword: unobtrusive JavaScript).

It also depends on whether the site is meant to run with disabled JavaScript. If yes, then such a link (but also a button) will not work.

But in any case, from a semantic point of view, using a link solely to have something "clickable" is wrong.

how get anchor tag url hash values in jquery?

.hash isn't a property of a jquery object, but rather is a property of an HTMLAnchorElement (a class which extends from the Element class), thus you're getting undefined.

So, instead of creating a jQuery object using $(this), you can reference the actual element by just using this:

$(function() {  // get current url hash values.  var current = window.location.hash;
  $('#navbarSupportedContent ul li a').each(function() {    alert(this.hash);  });});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="collapse navbar-collapse" id="navbarSupportedContent">  <ul class="navbar-nav mr-auto">    <li class="nav-item active">      <a class="nav-link" href="index.php">Home        </a>    </li>    <li class="nav-item">      <a class="nav-link" href="index.php#aboutus">About Us</a>    </li>  </ul></div>

---

Related Topics