How To Scroll Users Web Page to a Specified Location
Have you ever wanted to make it so your page is automatically scrolled to a certain spot? this can be useful for several reasons:
1.highlighting a piece of content.
2.keeping the view of the page consistent.
3. creative navigation.
There can be search engine drawbacks related to number 3. Read ending line to learn more.
Say you have an image on your webpage that you want to direct users to, but in your layout it happens to fall in the middle of the page. You still want people to know exactly what you want them to see, but you don’t want to have to compromise design to achieve it. Worry not! for this there are Fragment Identifiers!
What are Fragment Identifiers? You have probably seen them before. They usually come at the end of a url and they start with a #. eg. example.com/index.html#navigation. They scroll the page so that the piece of content with the fragment identifier starts at the top of the browser window.
Who uses Fragment Identifiers? I do!(pitt.edu/~zdm9/labiv/photos/#page5) and you can too.
How to use Fragment Identifiers? It’s easy! And it is all through use of the id attribute. I’ll show you!
We will do this with something I know you all have used before, an image!
A base image tag:
<img src=”blah.jpg” alt=”bleck” title=”see the blah!” />
And you have probably added classes to your image:
<img src=”blah.jpg” alt=”bleck” title=”see the blah!” class=”image_styling” />
Remember that other attribute you can use to style? the id=”” attribute? Yep, it has more than one use!
We will add an Id. This will also be your fragment ID. Name it something unique (no more than one with the same name on this page) and use dashes instead of spaces if you have more than one word. Also, numbers are ok, but you have to start the id with a letter:
<img src=”blah.jpg” alt=”bleck” title=”see the blah!” id=”image1″ />
let’s assume this image is on the page photos.html and it is on your pitt hosting. the url to the page will be something like pitt.edu/~abc123/photos.html
Now let’s add the Fragment Id to the URL:
we can link to this just like any other page by creating an html link
<a href=”pitt.edu/~abc123/photos.html#image1“> My First Image! </a>
You can add id=”” attributes to most tags. here are some other ones you may find useful:
Comment below with questions, ideas, or additions to this article!
Check out this resource to learn drawbacks of fragment navigation for search engines (and how to fix it) along with tons of cool information