Home > Web Development > HTML Auto Focus

HTML Auto Focus

If you have a very long page with lots of contents, the user has to scroll up and down to reach a point in the page that can be annoying. It would be nice to place headings on the top of your page and when the user clicks on them he is taken to that part of the page without having to scroll. Best example can be seen in Wikipedia – you click a topic on top and it automatically scrolls the page and locates the content. Here is how you can do it

Example
Say you have two food items(Pizza and Burger) and you want to achieve this feature. So on top of your page you will place the below 2 links

<a href="#Pizza">Go to Pizza</a>
<a href="#Burger">GO to Burger</a>
some html content or pics or whatever. ... . . .

<a name="Pizza"></a>Content related to Pizza
Everything about Pizza goes here
some html content or pics or whatever. ... . . .
 
<a name="Burger"></a>Content related to Burger
Everything about Pizza goes here 
some html content or pics or whatever. ... . . .
Advertisements
Categories: Web Development
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: