My anchors are working perfectly fine when there referring to a anchor on the same page. But when there referring to another page, they load in with an offset.
The anchor is referred to as;
<a name="featuredwork">
The link is;
<strong>FEATURED WORK</strong>
What am i doing wrong?
Related
In my mvc project, I have a cshtml file, wherein I have an anchor tag placed inside a footer element, which looks like this:
<footer class="login_footer">#Messages.msgCopyright | <a onclick="BeginSupportLoginMode();">Support Login</a></footer>
The problem here is that I am not able to click on the link when it is placed inside the footer element. The link was clickable when I tried putting it outside the footer element. I have tried finding solutions in several ways, but nothing has worked yet. Please suggest what should be done in this case.
The <a> is missing a href attribute. It is valid but it doesn't behave as a hyperlink (It is not tab-able or clickable). If it should be a clickable link, add a href="" attribute.
I am trying to use anchor tag on 2 pages.
On the first page I have this link:
<p>Topic 2</p>
And on the second page I have this anchor tag:
<h2 id="boris">Boris</h2>
If I click on the link on the first page and use Firefox it goes to the second page and anchor works fine, meaning top of the page will be at Boris. However doing the same thing on Chrome does not work.
here is a link to the first page. At the bottom of the first page you can click on Topic 2 to go to the second page with anchor tag.
Why it works on Firefox but not on Chrome and how to fix this issue?
I see these lines of code in some professional developer's project:
<a href="###">
...
</a>
What is the use of three # instead of one?
That's usually written when you want your anchor tag to not change the href. For instance if you want to attach an event on it later on.
It doesn't matter how many # you are using. The href='#' will make the page jump to the top of the page if clicked.
My preferred way is doing <a href="javascript:void(0);". That way the click does absolutely nothing, instead of jumping the page up.
The first thing about "anchor tags"...
This use of ### in particular is to create a links that don't go anywhere, and to do that the href attribute must have a value. Please read the href W3C spec page for more info about that.
Browsers render default styles for elements and will change the default style of an anchor tag that doesn't have the href property. Instead, it will be considered like regular text. It even changes the browser's behavior with regard to the element. The status bar (bottom of the screen) will not be displayed when hovering an anchor without the href property. It is most optimal, then, to use a placeholder href value on an anchor to ensure it is treated as a hyperlink.
I've often seen <a href="#">, and <a href="##"> , a hashtag - # within a hyperlink specifies an html element id to which the window should be scrolled.
href="#some_id" would scroll to an element on the current page such as <div id="some_id">.
href="//example.com/#some_id" would go to example.com and scroll to the id on that page.
href="#" doesn't specify an id name, but does have a corresponding location - the top of the page. Clicking an anchor with href="#" will move the scroll position to the top.
So, when you use <a href="###"> this create a links but it doesn't go anywhere. You can use it from "##","###" and more of hashtag to create a links like a "Hyperlinks" but they take you nowhere.
My Conclusion:
So, what is the use of it?
You use it when you need a hyperlink that doesn't go anywhere. It's just to tell the browsers to change the style to an anchor tag.
Check this JSFiddle demo
As Bhuiyan's answer said, it is a variation on the href="#" trick...
Goal
So, to explain that trick. The trick is to work around the fact that Anchor tags are only rendered as links if they have a target to link to (see this example). The goal is to create a link that looks like a link, but doesn't actually go anywhere.
How it works
The href="#" idiom is taking advantage of the fact that anchors can specify a specific element as a target by using the href="#{other element identifier}]" notation. When you do this the browser will not redirect or reload the page, but instead scroll to that element. So when you specify href="#" you are essentially telling the browser that this is a link, but since there is no valid target element please don't do anything when it is clicked.
Note: It would work just as effectively to say href="#mybogusid" but then you would see #mybogusid appended to the url. Gross.
TL;DR of it all: <a href="###"> is just a way to make the browser render the anchor tag like a link, but not navigate anywhere on click.
I think this is same as Go to link that person just used three "###" instead of one "#". we can use more # if we want.
It was very useful when i had button and js click event. With '#' it scrolled to top every time i pressed the button, but with '###' it stayed in place as needed!
I am having a problem with what seems like it should have a simple solution.
I have anchor links set up in a html page and am having a problem with one of the links.
Here is the code I am using...
<div class="top-menu">
About</br>
Jersey</br>
SocialMedia</br>
Art</br>
</div>
The links
<a id="about"></a>
<a id="jersey"></a>
<a id="social"></a>
<a id="art"></a>
The anchors
The problem I am having is that 'About','Jersey' and 'Art' work perfectly fine, but 'social' keeps linking to 'jersey'.
I am using nice scroll, and a scroll to anchor script, however I have removed these and get the same effect.
As said previously I have also tried linking with name="" and id="".
The anchors were not inside a div, but I have tried that also.
EDIT: Also just tried using div tags instead of a.
It means you have multiple element having same Id also there is another possibility that Id is in scroll limit
I am still unsure as to this problem however I have found a solution. I have placed the anchor inside the div below it.
I'm trying to link to an element on the same page like this
Link
...
<div id="myelement">...</div>
But the browser keeps prepending the full domain to the link and it ends up linking to
http://example.com/#myelement
causing it to reload the page instead of moving to an element on the page. How do I get it to just link to #myelement?
The problem is the <base href="http://hecotravel.com/"> element, which dictates that all links are relative to http://hecotravel.com/. Therefore a link to #traveler is a link to http://hecotravel.com/#traveler, which is a different page than http://hecotravel.com/request.
Either remove the <base> element or link to request#traveler.