HOME | DD

Description
body div#devskin6740366 * { padding:0; border:0; margin:0; background:transparent; } body div#devskin6740366 .journalbox { border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border:1px solid #a6b2a6; color:#C2CCC2; background-color:#dae4d9; box-shadow:0px 0px 1px white; -moz-box-shadow:0px 0px 1px white; -webkit-box-shadow:0px 0px 1px white; max-width:700px; margin:auto; } body div#devskin6740366 .journalbox .journaltop { background:none; color:#dae4d9; font-size:12px; font-family:Helvetica; text-align:center; text-shadow:none; } body div#devskin6740366 .journaltop span { color:#87948c; margin-left:-60px; } body div#devskin6740366 .journalbox .journaltop h2 { text-decoration:bold; color:#2c3635; font-size:20px; font-family:Helvetica; text-shadow:1px 1px white; margin-top:10px; } body div#devskin6740366 .journalbox .journaltop img { display:none; } body div#devskin6740366 .hsep { display:none; } body div#devskin6740366 .journalbox .journaltext { font-size:12px; font-family:Helvetica; color:#2c3635; padding-top:30px; padding-left:15px; padding-right:15px; margin-left:15px; margin-right:15px; text-shadow:1px 1px rgba(255,255,255,0.8); text-align:center; } body div#devskin6740366 .journalbox .journalbottom { margin-bottom:10px; } body div#devskin6740366 .journalbox .commentslink { background:#dae4d9; color:#87948c; font-size:11px; font-family:Helvetica; text-shadow:1px 1px white; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:6px 10px; line-height:32px; border:1px solid #a6b2a6; } body div#devskin6740366 .journalbox .commentslink:hover { background:#C2CCC2; text-decoration:none; } body div#devskin6740366 .journalbox .prevlink { display:none; } body div#devskin6740366 .feature a img { background-color:white; border:1px solid #a6b2a6; padding:3px; } body div#devskin6740366 .feature a:hover img { background-color:#dae4d9; border:1px solid #a6b2a6; padding:3px; } body div#devskin6740366 blockquote { background:#C2CCC2; padding:3px; border:1px solid #a6b2a6; margin:5px; text-align:center; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } body div#devskin6740366 h3 a { text-decoration:none!important; } body div#devskin6740366 hr { border:0; height:0; border-top:1px solid rgba(0,0,0,0.4); border-bottom:1px solid rgba(255,255,255,0.3); } body div#devskin6740366 .toc { width:200px; padding:10px; border:1px solid rgba(0,0,0,0.5); text-align:left; } body div#devskin6740366 ins { background:rgb(255, 255, 255); background:rgba(255,255,255,0.5); text-decoration:none; } body div#devskin6740366 .red { background:rgb(255, 0, 0); background:rgba(255,0,0,0.2); } body div#devskin6740366 .blue { background:rgb(0, 0, 255); background:rgba(0,0,255,0.2); } body div#devskin6740366 .green { background:rgb(0, 255, 0); background:rgba(0,255,0,0.2); }

Hey all!
With all these lengthy articles and tutorials flying around these days, I thought it'd be useful for those writers to know how to easily make a navigational Table of Contents at the top of the article where you can just click on the link that will automatically jump to that certain section within your page. And then go back up to the Table of Contents and easily browse through the page. All it uses is a bit of HTML, no CSS. Below is a working sample of what I'm going to explain:

Name of Topic

Table of Contents
1. Introduction
2. Body
3. Conclusion

1. Introduction
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla enim eu nisl pretium pharetra. Aenean at tellus nec augue porta mollis. Maecenas volutpat urna eget tellus gravida vulputate.
Return to Top

2. Body
Vivamus quis est sagittis, consequat sem eget, commodo purus. Morbi vel orci id ligula accumsan hendrerit. Sed molestie et dolor vitae pulvinar. Nunc vestibulum venenatis ligula, adipiscing fermentum turpis volutpat ac.
Return to Top

3. Conclusion
Donec dignissim erat imperdiet interdum malesuada. Nunc suscipit, sem non porttitor tristique, ligula mauris sodales mauris, sit amet malesuada metus dolor at erat. Pellentesque elementum tortor laoreet mattis auctor. Phasellus gravida eu neque eget eleifend. Nunc lectus sem, sodales ac diam nec, suscipit varius est.
Return to Top

As you can see, clicking on each of the links in the Table of Contents will jump down to the section under the header of each of those topics. Note: It will work differently depending on your Browser. How to do this? Well, you all know the <a> tag, right? The one we love to use for links! Well, we're going to be using the <a name> attribute to create an anchor within a web document. Then using the <a href> attribute to re-direct to this anchor.

This is the anchor:
<a name="topic"></a>

This is the link:
<a href="#topic ">Topic</a>

Notice how the href link isn't a complete url link since it's only going to re-direct to the anchor within the page. After clicking the bookmarked link, the url will turn out something like this:
http://im-not-sana.deviantart.com/art/how-to-navigational-table-of-contents-0012345#topic

Below is the code for the working table sample shown previously:

<a name="top"></a><h1>Table Of Contents</h1>
1. <a href="#intro ">Introduction</a>
2. <a href="#body ">Body</a>
3. <a href="#conclusion ">Conclusion</a>

<a name="intro"></a>
<h1>1. Introduction</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla enim eu nisl pretium pharetra. Aenean at tellus nec augue porta mollis. Maecenas volutpat urna eget tellus gravida vulputate.
<a href="#top ">Back to Top</a>

<a name="body"></a>
<h1>2. Body</h1>
Vivamus quis est sagittis, consequat sem eget, commodo purus. Morbi vel orci id ligula accumsan hendrerit. Sed molestie et dolor vitae pulvinar. Nunc vestibulum venenatis ligula, adipiscing fermentum turpis volutpat ac.
<a href="#top ">Back to Top</a>

<a name="conclusion"></a>
<h1>3. Conclusion</h1>
Donec dignissim erat imperdiet interdum malesuada. Nunc suscipit, sem non porttitor tristique, ligula mauris sodales mauris, sit amet malesuada metus dolor at erat. Pellentesque elementum tortor laoreet mattis auctor. Phasellus gravida eu neque eget eleifend. Nunc lectus sem, sodales ac diam nec, suscipit varius est.
<a href="#top ">Back to Top</a>

That's all there is to it! Hope you found it useful

Aww — Description
body div#devskin6740366 * { padding:0; border:0; margin:0; background:transparent; } body div#devskin6740366 .journalbox { border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border:1px solid #a6b2a6; color:#C2CCC2; background-color:#dae4d9; box-shadow:0px 0px 1px white; -moz-box-shadow:0px 0px 1px white; -webkit-box-shadow:0px 0px 1px white; max-width:700px; margin:auto; } body div#devskin6740366 .journalbox .journaltop { background:none; color:#dae4d9; font-size:12px; font-family:Helvetica; text-align:center; text-shadow:none; } body div#devskin6740366 .journaltop span { color:#87948c; margin-left:-60px; } body div#devskin6740366 .journalbox .journaltop h2 { text-decoration:bold; color:#2c3635; font-size:20px; font-family:Helvetica; text-shadow:1px 1px white; margin-top:10px; } body div#devskin6740366 .journalbox .journaltop img { display:none; } body div#devskin6740366 .hsep { display:none; } body div#devskin6740366 .journalbox .journaltext { font-size:12px; font-family:Helvetica; color:#2c3635; padding-top:30px; padding-left:15px; padding-right:15px; margin-left:15px; margin-right:15px; text-shadow:1px 1px rgba(255,255,255,0.8); text-align:center; } body div#devskin6740366 .journalbox .journalbottom { margin-bottom:10px; } body div#devskin6740366 .journalbox .commentslink { background:#dae4d9; color:#87948c; font-size:11px; font-family:Helvetica; text-shadow:1px 1px white; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:6px 10px; line-height:32px; border:1px solid #a6b2a6; } body div#devskin6740366 .journalbox .commentslink:hover { background:#C2CCC2; text-decoration:none; } body div#devskin6740366 .journalbox .prevlink { display:none; } body div#devskin6740366 .feature a img { background-color:white; border:1px solid #a6b2a6; padding:3px; } body div#devskin6740366 .feature a:hover img { background-color:#dae4d9; border:1px solid #a6b2a6; padding:3px; } body div#devskin6740366 blockquote { background:#C2CCC2; padding:3px; border:1px solid #a6b2a6; margin:5px; text-align:center; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } body div#devskin6740366 h3 a { text-decoration:none!important; } body div#devskin6740366 hr { border:0; height:0; border-top:1px solid rgba(0,0,0,0.4); border-bottom:1px solid rgba(255,255,255,0.3); } body div#devskin6740366 .toc { width:200px; padding:10px; border:1px solid rgba(0,0,0,0.5); text-align:left; } body div#devskin6740366 ins { background:rgb(255, 255, 255); background:rgba(255,255,255,0.5); text-decoration:none; } body div#devskin6740366 .red { background:rgb(255, 0, 0); background:rgba(255,0,0,0.2); } body div#devskin6740366 .blue { background:rgb(0, 0, 255); background:rgba(0,0,255,0.2); } body div#devskin6740366 .green { background:rgb(0, 255, 0); background:rgba(0,255,0,0.2); }

Hey all!
With all these lengthy articles and tutorials flying around these days, I thought it'd be useful for those writers to know how to easily make a navigational Table of Contents at the top of the article where you can just click on the link that will automatically jump to that certain section within your page. And then go back up to the Table of Contents and easily browse through the page. All it uses is a bit of HTML, no CSS. Below is a working sample of what I'm going to explain:

Name of Topic

Table of Contents
1. Introduction
2. Body
3. Conclusion

1. Introduction
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla enim eu nisl pretium pharetra. Aenean at tellus nec augue porta mollis. Maecenas volutpat urna eget tellus gravida vulputate.
Return to Top

2. Body
Vivamus quis est sagittis, consequat sem eget, commodo purus. Morbi vel orci id ligula accumsan hendrerit. Sed molestie et dolor vitae pulvinar. Nunc vestibulum venenatis ligula, adipiscing fermentum turpis volutpat ac.
Return to Top

3. Conclusion
Donec dignissim erat imperdiet interdum malesuada. Nunc suscipit, sem non porttitor tristique, ligula mauris sodales mauris, sit amet malesuada metus dolor at erat. Pellentesque elementum tortor laoreet mattis auctor. Phasellus gravida eu neque eget eleifend. Nunc lectus sem, sodales ac diam nec, suscipit varius est.
Return to Top

As you can see, clicking on each of the links in the Table of Contents will jump down to the section under the header of each of those topics. Note: It will work differently depending on your Browser. How to do this? Well, you all know the <a> tag, right? The one we love to use for links! Well, we're going to be using the <a name> attribute to create an anchor within a web document. Then using the <a href> attribute to re-direct to this anchor.

This is the anchor:
<a name="topic"></a>

This is the link:
<a href="#topic ">Topic</a>

Notice how the href link isn't a complete url link since it's only going to re-direct to the anchor within the page. After clicking the bookmarked link, the url will turn out something like this:
http://im-not-sana.deviantart.com/art/how-to-navigational-table-of-contents-0012345#topic

Below is the code for the working table sample shown previously:

<a name="top"></a><h1>Table Of Contents</h1>
1. <a href="#intro ">Introduction</a>
2. <a href="#body ">Body</a>
3. <a href="#conclusion ">Conclusion</a>

<a name="intro"></a>
<h1>1. Introduction</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla enim eu nisl pretium pharetra. Aenean at tellus nec augue porta mollis. Maecenas volutpat urna eget tellus gravida vulputate.
<a href="#top ">Back to Top</a>

<a name="body"></a>
<h1>2. Body</h1>
Vivamus quis est sagittis, consequat sem eget, commodo purus. Morbi vel orci id ligula accumsan hendrerit. Sed molestie et dolor vitae pulvinar. Nunc vestibulum venenatis ligula, adipiscing fermentum turpis volutpat ac.
<a href="#top ">Back to Top</a>

<a name="conclusion"></a>
<h1>3. Conclusion</h1>
Donec dignissim erat imperdiet interdum malesuada. Nunc suscipit, sem non porttitor tristique, ligula mauris sodales mauris, sit amet malesuada metus dolor at erat. Pellentesque elementum tortor laoreet mattis auctor. Phasellus gravida eu neque eget eleifend. Nunc lectus sem, sodales ac diam nec, suscipit varius est.
<a href="#top ">Back to Top</a>

That's all there is to it! Hope you found it useful