I'm writing some documentation using GitHub's built in wiki (using Markdown syntax).
The problem I have had with anchor tags is that once I have clicked that anchor once, manually scrolled down to it again, and try to click it, it won't work anymore.
a) The place where the anchor links jump to.
##<a name="listofactions">List of Actions</a>
b) An example of an anchor link
[Back to List of Actions](#listofactions)
I also tried html in markdown syntax
Back to List of Actions
And even tried linking to the full url with the # and anchor appended.
Back to List of Actions
They all work, but when I manually scroll down to the anchor link again and click it, it doesn't bring me back to (a) anymore. Unless I click on a different anchor link.
How can I write it such that the anchor links can work regardless?
There is nothing wrong with your Markdown. This is simply how browsers work. The first time you clink the link (when viewing the same page), the URL in the address bar of your browser changes from http://example.com/path/to/your/page to http://example.com/path/to/your/page#someanchor. As that is a different URL, the browser will navigate to the new URL by scrolling to the appropriate position on the page. However, as you read the page and scroll to a different position, the URL remains the same. Finally, the second time you click the link,the URL is already http://example.com/path/to/your/page#someanchor so there is no change in the URL and as far as the browser is concerned, you are already there so no navigation happens and the page does not scroll.
There may be some JavaScript tricks you can use to trick the browser into behaving as you want, but those won't work on GitHub as they won't let you include any JavaScript in your pages for security reasons.
What you could do as a workaround (assuming you have a long page and want to easily find the specific location again) is first click the [back] button (taking you back to http://example.com/path/to/your/page) in your browser's navigation bar and then click the [forward] button (returning you to http://example.com/path/to/your/page#someanchor) which should trigger the browser to navigate to the location and scroll the page.
Try this:
...
<a name="listofactions"></a>
## List of actions
Mind the blank line between the HTML tag and the markdown markup.
Then call it via [link-to-anchor](#listofactions)
Should work.
Hope to have helped!
Add the attribute target="_self"
Related
I know that # character within links of hyperlink tag href is used to scroll the pointed page to the specified element-id once opened:
href="//site.com/#some-id"
when used solely, means to just scroll up to the top of the current page:
href="#"
but what about when it is attached to the beginning of a link?
href="#/phones/phoneid
will it scroll the pointed page to its top once opened?
The # in a URI is used to indicate an in-page anchor on a given page.
I know that # character within links of hyperlink tag href is used to
scroll the pointed page to the specified element-id once opened:
href="//site.com/#some-id"
It's not so much that it "opens" the page and then "scrolls" to the anchor. It opens the page at the anchor - the anchor is part of the address.
when used solely, means to just scroll up to the top of the current
page:
href="#"
Yes. Kind of. But that's because you haven't stated the name of the anchor and the browser can't find it - so the browser doesn't take you to anywhere below the top of the page.
but what about when it is attached to the beginning of a link?
href="#/phones/phoneid/"
will it scroll the pointed page to its top once opened?
Well, there's no need, is there?
href="/phones/phoneid/"
will already take you to the top of the /phones/phoneid/ page.
In short, a hash-fragment is part of a web address.
The hash-fragment consists of two parts:
The hash (#)
The name of the anchor
Clicking on a URI containing a hash-fragment opens the indicated page at the indicated anchor.
Clicking on a URI which does not contain a hash-fragment opens the indicated page at the top.
If a URI contains a hash-fragment which has an invalid name (or which isn't named at all), the browser won't be able to find the anchor and will default to opening the indicated page at the top.
No it won't. You have to add the # to the end of the URL to let it scroll to the top, for example:
Text
It will search for an ID in your DOM. If there isn't an ID like this, nothing happens.
But try it yourself because this is only a speculation.
The url system currently works like this:
protocol://domain.name/resource#anchor Link
(syntax simplified for this example)
Adding another resource path after an anchor link makes no sense because the anchor link is assigned to the resource you seek, it cannot be part of the resource path.
Solution: add the # at the end of your link to make it scroll to the top.
I am trying to use anchor tags in wordpress on my main menu. I am creating the menu through the menu editor in wordpress. I have added my anchors to my page exactly how I want and have tested that the links for example mywebsite.com/about-us/#executive-team work correctly.
And they all work as I want them to when I paste the link in the browser address bar.
The links also work when I click on the menu item.
Here is my problem: the anchor links DO NOT work when I click on them from the actual page that has the anchor point on it. For example, if I click on mywebsite.com/about-us/#executive-team from mywebsite.com it works great. If I click on mywebsite.com/about-us/#executive-team from mywebsite.com/about-us the link does not go anywhere.
Any suggestions. I need the anchor links to work no matter what page they are being clicked from.
Remove the trailing slash from the URL:
mywebsite.com/about-us#executive-team
The trailing slash is looking for another page. It works fine from an external page, but on the page itself, the slash throws off the browser.
I have a drop down menu which I include on all my pages using php. On this menu I am using anchors to navigate to various divs on a single page. It is very simple code, anchors with tags in the href, no JavaScript.
Test
navigates to
<h2 id="test">Test</h2>
If I am navigating to the page this works fine. If I am already on the page it goes to the tag then redirects back to the page without the tag (i.e. goes from test.php#test to test.php). What is causing this behavior and how do I fix it?
If you had provided more code then it would have been more helpful. But I am just guessing here what the problem is. You can add the following javascript to your page:
$("a[href^=#]").on("click", function(e) {
e.preventDefault();
history.pushState({}, "", this.href);
});
What this does is target all hash-links and prevent their default behavior and change the URL. But without seeing more of your code, its hard to tell if it'd work. You can also interchangeably use replaceState, which would change the URL without adding an entry to the browser history. Code borrowed from here.
I know using iframes is not always the best idea, but for my case it makes things easier. I have a website A which contains links to other parts on the same site (using <a name=...). I have a seconds site B which has an iframe containing A. Everything works fine, except the page hyperlinks, if you click on them, nothing happens.
Does anyone know if named hyperlinks are even possible in iframe? And if yes how to make them work.
EDIT:
Seems like I wasn't clear enough. The file is named test.html (http://www.domain.com/embedded/test.html) and contains a hyperlink at the top
Examples
then somewhere at the end there is a link
<a name="examples"></a>
So when you click on the top link the page should scroll down to the bottom link. I have a second page (http://www.domain.com/index.html) with the iframe containing test.html. When hovering over the link (inside the iframe), it shows http://www.domain.com/embedded/test.html#examples. I'm not and iframe expert, but this link seems as it would rather redirect to the actual file (to #examples), rather than jumping inside the iframe. As I said before when clicking on the link nothing happens. Just tested in in Chrome and it works. Seems like this is a problem specific to Firefox.
These parts of your question make me smell something: "links to other parts on the same site (using <a name=...)" and "named hyperlinks"...
A hyperlink for moving to an other part of the same page:
Goto BOOKMARK
And an anchor (bookmark) somewhere else in the same page:
<a name="BOOKMARK"></a>
These are working in every HTML-document, regardless they were shown in the iframeor not.
I had a similar problem. I too wanted a link in an embedded page to point to a bookmark in the containing page. But I am not sure if our circumstances are exactly the same.
A local link such as
<a href="#BOOKMARK">
will only look for an anchor in the same page as the link, i.e. in the embedded page. An approach such as
<a href="containing-page.html#BOOKMARK" target="top">
will only work if your link always references the same containing page. (The target needs to be specified, to display the page outside the iframe.) I am not sure if this will meet your needs.
If you want to re-use a common bookmark name in different containing pages, as I do, the design effectively requires the destination url to be treated as a variable, and that cannot be done using pure HTML. It requires javascript or similar.
It was in fact more elegant for me to add the bookmark link to the containing page, so that I do not need to standardize my bookmark names. This does not even need javascript, just a bit of css.
What I did was to position the bookmark link over the embedded display, so that it looks like it is part of the embedded page. In this example, the iframe is fixed at the top of the page and the bookmark link positioned over its top left corner.
<iframe style="position:fixed; left:0pt; top:0pt;" src="embedded-page.html"></iframe>
<div style="position:fixed; left:0pt; top:0pt;">
My Bookmark
</div>
With a bit of css refinement, this gives some flexibility of layout. For your issue, you may need to stick with javascript.
I see on some website (like StackOverflow, yahoo, the US Homeland Security department, ...) a word associated to a link that, when clicked, not only loads a page, but also, displays that page at the exact location where the contain related to the word starts.
How can I obtain that with ASP.NET MVC? (by the way, do I need javascript for that?)
Thanks for helping
Go to the other content
<a name="jumpHere">Some content</a>
Also the URL can have /yourpage.html#jumpHere or with variables, /yourpage.html?var1=foo&var2=bar#jumpHere.
Since we're talking about the hash (#), it's usually used for jumping to a specific part of the page. Because of that, it won't reload the whole page. This is useful for web applications that move from one view to another using only AJAX. To make each view bookmarkable, JavaScript "saves" the state (what view you are on) using location.hash to the URL. The next time you open the URL, JavaScript reads it and loads the correct view. In HTML5 this is superseded by pushState.
1) Find the coordinates of the element on the page
2) window.scrollTo(x,y)
Its called an anchor tag.
Place this in your HTML.
<a name="name"></a>
If you call this URL, it will jump to that place.
html-file.html#name
See: http://www.w3schools.com/tags/tag_a.asp
You can use a named anchor to do this with HTML, without javascript. here is a link explaining this.
It is very simply done with id tag of differnt html elements
for eg :- an div element if it is having "footer" as its id and is placed at the bottom of the page then, http://url-address-to-thatpage.html#footer will load the page and scroll it too the footer. (adding the "#idoftheelement" after the page url)
It is also possible to load and scroll the page with javascript.
You need to create a named anchor within the page. This will have the result you're talking about, almost like creating a "bookmark" within a page. No javascript required.
First, create the anchor using the <a> tag with the name attribute specified (in this case, section1):
<a name="section1"></a>
Then, to link to that anchor from the same page, just use something like this:
Go to Section 1
If you're linking to that anchor from another page (in this case, mypage.html), append #section1 at the end of the url:
Go to Section 1 in MyPage.html
For more information, see here.
Another way to do it is with the "id" attribute if it's not an anchor tag you'd like to bookmark. For example:
<div id="bookmark1">Content...</div>
Then, you can link to it with an anchor tag like this:
Go to content
Or link to that spot on the page by appending a #bookmark1 to
http://yourwebsite.com/page#bookmark1