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.
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.
How do I create a link using HTML to scroll down to a certain a h1, just using HTML? Is it possible?
I have an idea from using Bootstrap studio but not sure if it’s actually the correct way of doing it. You link to the Id of the element you want to scroll to by creating an Id for header and then adding the if to the link tag.
<a href=“#h1”>Scroll Down to header</a>
<h1 id=“h1”> Header</h1>
Is this right? Or is it more to it then that?
I’m new at StackOverflow btw... I looked for this answer but couldn’t find anything.. must have been saying the wrong thing.
Correct. As long as you include the # before the id you are referring to, the code will scroll down to the referenced element.
Reference to this question: Link to an element within the current page
Extra
If you want an animated scroll, check out this question: jQuery scroll to element
On the wordpress site i'm building a want a link that refers to a section on the same page.
Code here:
test
The code on the landing section here:
<a name="offer"></a>
Somehow the link is ignored. Maybe it has to do with the wordpress setup? Here the site: http://bbwebdes.myhostpoint.ch/webauftritt/
I've tried everything with relative and absolute links but nothing is working and I have no clue why.
You need it to be an ID if you're referencing an internal link
<a id="offer"></a>
Also might I suggest using a DIV or a SPAN instead of using a link, since it could lead to horrible outcomes.
<span id="offer"></span>
Your code has two mistakes.
You should use id instead of name.
and you should use div or span instead of a.
Try this:
<div id="offer"></div>
//<a id="offer"></a> --> Dont use this
This code works on all desktops and tablets, in every browser, but for some reason I cant find, it is not working on cellphones, android or apple!
I cannot even select the text on cellphones..
<div class="inner-content block-content-style-2">
<a href="index.php/fr/services-fr/moule">
<div class="icons-molding"> </div>
</a>
<h3 class="title">Conception</h3>
</div>
I tried moving the href to a couple of place, but didnt change anything, but anyways, even if it is not a link, i should be able to select the text when using a cellphone
I tried to add a href inside the h3 tag for mobile to click on it, but it is not working either.
you can try it live here: http://www.qualiplast.com
On desktop or tablet, it works just as intended, but not on any cellphone.
Thanks for helping me out.
There is a div with an id of 'avatar-body-middle-block' that is appearing above the links on mobile, and preventing them from being clickable. Remove (or more likely hide) this div on mobile and the links will work.
I faced the same problem. Here's how I solved it in my case.
I tried inspecting on the 'a href' element. Turns out that some other element shows up in the developer console. After some pondering, I realized that some other div element was showing up above my link.
After reading through the css styling for the overlapping element and disabling the overlapping css command, the link started working for me. (float: none had to be deleted in my case, from an overlapping div)
Hope this helps someone else out there
I have an image that, when clicked I'd like to take the user to the top of the page (it's a "back to top" link.)
I have linked the image using an ID to my 'navigation' div using the code below, as I have been told is the correct way to do so, but it does nothing.
Live site
HTML
<div id="navigation">
stuff in here
</div>
and
<!-- Back to top link -->
<div class="bottom">
<a href="#navigation">
<img src="images/back_top.png" />
</a>
</div>
This doesn't seem to do anything though, I thought the name attribute was deprecated and thus id's should be used instead but this doesn't do anything?
Since your #navigation element is positioned with position: fixed it is always on screen. You need to link to an element that will stay at the top of the document.
You could add in another element, or add an id to the body. Alternatively, change the position of the navigation so it stays in flow. Or, you could use JavaScript to animate a scroll to the top (e.g. with jQuery .animate and the scrollTop property).
Put this:
<a name="top"> </a>
right after/before your navigation div.
Then, change
<a href="#navigation">
to
<a href="#top">
P.S.: After looking at page-source, I'd suggest you put it just after the <body> tag.
you have linked it to something which stays already on the screen(Fixed positioned). link it something which is not fixed positioned .
Just to throw this out there for people coming along reading this... Linking to an A NAME is deprecated and not a best practice... Linking to an ID is the best way to go in the long run.
http://www.w3.org/TR/html4/struct/links.html