JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Creating Extra Links to the Top

If your page has a lot of text, you may want to add some extra "to the top" buttons that make it easier for visitors to navigate around your page. Remember, they have no mouse!

To create extra links to the top:

1.
Add the new links in the XHTML document, giving them the totop class (Figure 13.16).

Figure 13.16. Add links back to the top (or back to the navigation bar) to make it easy for your visitors to move around your page.


2.
In the style sheet for big screens, add .totop {display:none} to hide the extra links from your visitors on computers (Figure 13.17).

Figure 13.17. We don't want the logo to appear on our site when it's viewed with regular computer screens, so we'll add this line to our screen style sheet.


3.
In the handheld CSS, style the totop class as desired.

Tips

  • While you could just create a navigation bar and then repeat it throughout your document, that will create a lot of links to scroll through and may make your document even harder to browse. It's better to link to the navigation bar from places where it'll be useful.

  • Another option if you have a large navigation bar is to offer a Skip Navigation button at the top of your site so that visitors can go directly to the content.

  • Because the div already has an id of header, there is no need to create an anchor manually. For more details about linking to a particular part of a page, see see Linking to a Specific Anchor on page 107.

  • Note that I've added a dash (-) between the continued and to top links. To keep it from being shown on big screens, I've styled the dash with the totop class.


Figure 13.18. We'll place a "to top" button at the end of every article so that our visitors can quickly return to the navigation bar if desired.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→