At this URL
boiseresturants.com/mexican/baja-fresh-mexican-grill.html
I have an anchor link that looks like
his is a test
Now I expected the above link to appear as
boiseresturants.com/mexican/baja-fresh-mexican-grill.html#takemehere
But it points to
boiseresturants.com/#takemehere
Why is this happening? I have never seen something like this before.
The reason it's jumping to the home page is because the page has <base> set in the <head>:
<base href="http://www.boiseresturants.com/" />
Either drop that or be more specific with your anchors like so:
Take Me Here
The base element is causing that unexpected behaviour...
<base href="http://www.boiseresturants.com/" />
You'll need to use the full path.
Related
If I have a page www.example1.com/foo/test.html as follows:
<head>
<base href=http://www.example2.com/>
</head>
<body>
<a href=#foo>foo</a>
...
<a name=foo />
</body>
Then when I click "foo" it takes me to http://www.example2.com/#foo instead of the current page's foo. I suppose this sort of makes sense, but is there a way to do a page-local named anchor jump when <base> points somewhere else?
Note that test.html is named named dynamically, so an absolute path in the href=...#foo isn't an option. Some JS could be, but strait html would be preferred.
This is expected behavior, documentation says that all relative links are relative to including anchors:
http://w3schools.com/tags/tag_base.asp
See also:
href="#" redirects to the index page but not to the current page's top
I am making a page where I want the links from my navigation to jump to their corresponding anchor tags in the page, however when I click the links the page does not jump at all.
The code for my page is here:
https://github.com/harlanplatz/harlanplatz.github.io/blob/gh-pages/index.html
I have worked with anchor tags before and am not sure why this may not be working.
OK Thanks Justin, it looks like you are just missing some linkage in your named anchor (<a></a>) tags.
Remember that you must name your destination anchor <a> tag. So:
<a name='example'><h1>Cool story bruh</h1</a>
Then, to link to it, make sure you use #anchorname in your link <a> tag. So:
<a href='#example'>Read a cool story</a>.
So you are matching the part after the # in your link href to the name attribute in the anchor you want to jump to. I don't see this going on in your HTML.
I have a link on one page that needs to go to a different page, but load to a specific section on that other page.
I have done this before with bootstrap but they take all the 'coding' out of it, so I need to know how to do from scratch. Here is the markup I have based on this link (not the best resource, I know): http://www.w3schools.com/html/html_links.asp
**Page One**
<a href="/academics/page.html#timeline> Click here </a>
**Page I am linking to**
<div id="timeline" name="timeline"> ... </div>
Can I do this with just HTML, or do I need some JavaScript? If I need to do it via JS, it needs to be on the target page, right?
I believe the example you've posted is using HTML5, which allows you to jump to any DOM element with the matching ID attribute. To support older browsers, you'll need to change:
<div id="timeline" name="timeline" ...>
To the old format:
<a name="timeline" />
You'll then be able to navigate to /academics/page.html#timeline and jump right to that section.
Also, check out this similar question.
You can simply use
<a href="directry/filename.html#section5" >click me</a>
to link to a section/id of another page by
To navigate to a section of another page use:
<a href="example.html#example-section>name-of-link</a>
The example.html would be the page you want to go to, and the #example-section would be the name of the id on that page that you want to navigate to.
To link from a page to another section of the page, I navigate through the page depending on the page's location to the other, at the URL bar, and add the #id. So what I mean;
This takes you #the_part_that_you_want at the page before
I tried the above answer - using page.html#ID_name it gave me a 404 page doesn't exist error.
Then instead of using .html, I simply put a slash / before the # and that worked fine. So my example on the sending page between the link tags looks like:
El Chorro
Just use / instead of .html.
To link from a page to another section just use
my first div
If I set my base url like so:
<base href='http://example.com' />
And then put a link to an anchor on the page http://example.com/test.php:
<a href='#top'></a>
How do I make sure the anchor stays on the same page and goes to the link http://example.com/test.php#top as opposed to going to http://example.com/#top because it uses the base url?
Essentially, is there any way to specify that this particular link must be relative and not use the base?
You could either do:
<base href='http://example.com' />
<a href='test.php#top'></a>
or
<base href='http://example.com/test.php' />
<a href='#top'></a>
I don't think there is any magic way that the client is going to know what file to use as part of the base if you don't define it.
I`ve seen on various websites, some links appear like this: http://www.myserver.com/page.html#something and when I click on it, it just moves to another portion of the page.
I want to know how to do this. Is it only the URL of the <a href> atrribute?
The fragment at the end of the url coresponds to an ID on the page you're visiting.
If in my page I have a section such as:
<div id="comments">
...
</div>
Then I can take the user to this section by attaching #comments to the pages URL
(http://www.example.com/page.html#comments)
Link to comments
Update
Some of the other answers here correctly point out that you can create an anchor with a name attribute as: <a name="example"></a>.
Although this is technically correct, it's also a very antiquated way of doing things and something I'd recommend you avoid. It's very 1997 as some might say :-)
The text after the hashtag corresponts with an anchor on the page. An anchor is a hidden element on the page which you can link to.
Think for example about a large page with an to top link in it
To create an anchor use:
<a name="C4"></a>
To link to it use: Text
Or you can even link to an id of an element
Check out: links (aka anchors)
Also note that you can use <a name="something"></a> or <a id="something"></a>
or using divs <div id="something"></div>
This is a link to a bookmark on the given page (or even just #something on the current page).
To make it work, you need to define something. You can do this using the name attribute of an <a> tag.
http://programming.top54u.com/post/HTML-Anchor-Bookmark-Tag-Links.aspx