Member Avatar for brown23

Hey Guys,

I just wanted some help on how I can use Javascript's onClick function to allow my visitors to be able to navigate to different paragraphs.

So, for example:

<html>
<head>
<title>Test</title>
</head>
<body>
<p>
<a href="#" onClick="?">Click here to go to Paragraph 1</a>
<a href="#" onClick="?">Click here to go to Paragraph 2</a>
<a href="#" onClick="?">Click here to go to Paragraph 3</a>
<a href="#" onClick="?">Click here to go to Paragraph 4</a>
<a href="#" onClick="?">Click here to go to Paragraph 5</a>
<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>
<p id="p4">Paragraph 4</p>
<p id="p5">Paragraph 5</p>
</body>
</html>

How could I make it that the links navigate the user to the paragraph? I'm researching into the GetElementByID - but am still developing my knowledge... I know they can easily scroll down - but the paragraphs will be large walls of text answering faqs!

All help is greatly appreciated. :)

Edited by brown23 because: n/a
  • 2 Contributors
  • 2 Replies
  • 259 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for brown23

Don't worry guys - I've found the solution! :D

If anyone is having problems with this in the future - then here is how you do it. If you're anything like me then you'll be kicking yourself - it's so obvious and easy!

<html>
<head>
<title>Test</title>
</head>
<body>
<a href="page.html#p1">Go to Paragraph 1</a>
<a href="page.html#p2">Go to Paragraph 2</a>
<a href="page.html#p3">Go to Paragraph 3</a>
<a href="page.html#p4">Go to Paragraph 4</a>
<a href="page.html#p5">Go to Paragraph 5</a>

<a name="p1"></a><p>This is Paragraph 1</p>
<a name="p2"></a><p>This is Paragraph 2</p>
<a name="p3"></a><p>This is Paragraph 3</p>
<a name="p4"></a><p>This is Paragraph 4</p>
<a name="p5"></a><p>This is Paragraph 5</p>
</body>
</html>

The code above explains it pretty easily. But, basically all you need to do is to name an a tag above where you want to page to go, and place a link calling that part of the page - with the url and name separated by a #

Easy!

Edited by brown23 because: n/a
Member Avatar for Airshow

Or even simpler if the links are on the same page as the paragraphs:

<html>
<head>
<title>Test</title>
</head>
<body>
<a href="#p1">Go to Paragraph 1</a>
<a href="#p2">Go to Paragraph 2</a>
<a href="#p3">Go to Paragraph 3</a>
<a href="#p4">Go to Paragraph 4</a>
<a href="#p5">Go to Paragraph 5</a>

<a name="p1"></a><p>This is Paragraph 1</p>
<a name="p2"></a><p>This is Paragraph 2</p>
<a name="p3"></a><p>This is Paragraph 3</p>
<a name="p4"></a><p>This is Paragraph 4</p>
<a name="p5"></a><p>This is Paragraph 5</p>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.