how to scroll down to a specific page position within same page using HTML 5 ?

Question

0.00/5 (No votes)

See more:

"name" attribute is depricated in HTML 5 So how can i consume functionality scroll to specific Paragraph within the same webpage when user click on menu list items :-

say i have menu nav bar like as shown below(snippet):

HTML

<ul>
<li href="AboutUs.aspx#Pro">Profile</li>
<li href="AboutUs.aspx#Why>Why Us</li>
<li href="AboutUs.aspx#Org>Organization</li>
<li href="AboutUs.aspx#His>History</li>
</ul>

Paragraphs of Profile,Why Us , Organizations,History are on the same web page here AboutUs.aspx like:-

HTML

<h1><a name="Pro">Profile</a></h1>
<p>Description about Profile</p>
<h1><a name="Why">Why Us</a></h1>
<p>Description about Why Us</p>
<h1><a name="Org">Organization</a></h1>
<p>Description about Organization</p>
<h1><a name="His">History</a></h1>
<p>Description about History</p>

I got success on using named anchor /bookmarks by implimenting the code Written above but HOW CAN I DO THE SAME IN HTML 5 for scrolling to target paragraphs within same page.THE PROBLEM IS THAT NAME ATTRIBUTE IS NOT SUPPORTED IN HTML 5 !!!

For further understanding what i am saying click the link provided below:
http://www.thesitewizard.com/html-tutorial/link-to-specific-line-or-paragraph.shtml#howtostart[^]

Any help ???

Posted 26-May-13 15:51pm

kumarsaurav32

Updated 26-May-13 17:12pm

Kenneth Haugland

v6

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Motley Drew · Accepted Answer · 2013-05-26T16:46:00

I put a bunch of line breaks in so you can see it work. You were close with your version, but this is how you do it.

XML

<ul>
                <a href="#Pro"><li>Profile</li></a>
                <a href="#Why"><li>Why Us</li></a>
                <a href="#Org"><li>Organization</li></a>
                <a href="#His"><li>History</li></a>
            </ul>

            <h1 id="Pro">Profile</h1>
            <p>Description about Profile</p>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <h1 id="Why">Why Us</h1>
            <p>Description about Why Us</p>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <h1 id="Org">Organization</h1>
            <p>Description about Organization</p>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <h1 id="His">History</h1>
            <p>Description about History</p>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />