linking to another part of the same page - html

I've been looking around online for a solution but the methods I've found don't work. The methods online tell me to do this
Make a div with a class and ID
I make one like this
<div class="paragraphBackground" id="paragraphBackground">
<p class="paragraphContent">content of paragraph</p></div>
then it says to make a link like o have below.
Goto paragraph
But when I click on the goto paragraph it doesn't do anything.
What I'm wanting to use this for is a html readme for a mod that contains a sidebar on the left that shows all the contents of the readme and when you click on one of the links it will jump you to that section in that same HTML file.

Are you looking for something like this?
http://jsfiddle.net/huntmg90/
Basically you set a <a name="identityofanchor" /> in front of your text you want linked, then to link to it you do a label of anchor

Just use the following for the link: <a href="#readme">.
For the part that you want to scroll to, use this: <div id="readme">Read me!</div>
JSFIDDLE HERE.

Your link will need to look something like this:
Paragraph 1
And the corresponding content needs to have:
<a name="paragraph1">Paragraph 1</a>
Here's a Fiddle to help: http://jsfiddle.net/m0nk3y/9mx5yx7d/

Related

Menu item hyperlink does not work

First post here with something that is probably easy but escapes me.
On this site, which I wrote from scratch, the contact link does not jump to the div class "contact".
The site is www.whatyousaycounts.com. I am also open to any other feedback for improvements that you see are needed.
Hyperlinks can only refer to ids, you are trying to refer to a class though. Classes can be used several times, therefore, your link can't target anything.
All you have to do is add the id="contact" to your div and it will work properly.
Each of your other sections have something like:
<div class="videos" id="videos">
Whereas your Contact section is:
<div class="contact">
It needs the id to be set as well.

How to jump to a different section of a page?

Is there a way to jump to a section on a different page when you click a link? I am a beginner, so I don't know JavaScript etc.
You don't need anything but HTML:
<a href="other-page.html#example">
and (on the other page):
<div id="example">
Wrap the part in a <div> and and define an ID to it. Like this:
<div id="loc">
Band then add an anchor tag with href set to that id:
<a href="#loc">
This will take the screen to that part the the referenced ID.

Getting a link to go to a specific section on another page

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

How to use an HTML # anchor in a dynamic URL

I want to link to a section of a dynamic page using the # anchor. Something like this:
<a href=page.php?id=3#section-name>LINK</a>
It didn't work. What is the right way to do it?
I'm not using a direct link, but a redirect like header("Location:page.php?id=3#section-name") from another script.
I have a section named section-name in file page.php. I guess page.php has a problem figuring out the value of the id to process (3 or 3#section-name). I am redirected to page.php which has its content repeated vertically.
You've only presented half of your code so I can only give a sample of the proper way to do it:
<body>
<a name="top"> </a>
<a href="#top">
Go To Top Of Page
</a>
</body>
When using anchor tags, you can target an element by its ID. Browsers will look for the ID before it looks for the name attribute when the link refers to such.
<a href="#section-name>LINK</a> will go directly to <div id="section-name"> if it exists.
Here's an example
Read: HTML Anchors with 'name' or 'id'?
A typical anchor tag works as follows:
A href link tag is written like so:
Jump to a001
See the #a001 above? That is referencing an id in the HTML page, and it will jump to it if you click this link.
To provide an example of how this id that we would jump to might look on a page, look below.
<li id="a001">text here</li>
Reference

HTML div navigation

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