Zymic Webmaster Forums > Scroll To Paragraph

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS

XyberForce

Oct 29 2007, 11:21 PM

I'm not sure whether or not this is PHP, AJAX, or HTML, how do you create buttons that direct users to a specific paragraph or section in your HTML page? I've googled it, but haven't found anything yet.

Just like the technology they used in Wikipedia:

Link to normal page: http://en.wikipedia.org/wiki/Characters_of_StarCraft

Link to paragraph: http://en.wikipedia.org/wiki/Characters_of_StarCraft#Zeratul

I've tried to analyze it...perhaps the # tells the page to scroll to a div id?

Cmain

Oct 29 2007, 11:27 PM

QUOTE

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.

Below is the syntax of a named anchor:

CODE

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.

The line below defines a named anchor:

CODE

<a name="tips">Useful Tips Section</a>

You should notice that a named anchor is not displayed in a special way.

To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:

CODE

<a href="http://www.w3schools.com/html_links.asp#tips">
Jump to the Useful Tips Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:

CODE

<a href="#tips">Jump to the Useful Tips Section</a>

From: http://www.w3schools.com/html/html_links.asp

XyberForce

Oct 29 2007, 11:31 PM

Thanks for the fast reply, I'd always wondered how they did that. Now I'm wondering how they do it at

http://www.newgrounds.com/lit/faq

Most likely AJAX...

Oct 29 2007, 11:36 PM

They use prototype for that bit : http://prototypejs.org

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.