I recently changed the header image on my blog – from a random landscape filled with country greenery, to a beautiful picture of Liverpool City from the River Mersey featuring the Royal Liver Building.
I think you’ll agree that it’s a very beautiful picture and great representation of what Liverpool City is all about (after Football, of course), but I did have second thoughts after throwing it on the site, but only because of its size. It was a bit much after loading a couple of pages – I needed a solution or to remove it.
HTML Anchors / Bookmarks
My first thought was to use HTML anchors / bookmarks, which basically enable you to group certain parts of your page and give them an ID which can be linked from within the same page.
For example, if I had a page about dog food which contained 3 different sections: dog food, cheap dog food and luxurious dog food – I could simply define each section with an anchor ID and then link to it within the same page, which would focus the window on that section when clicked.
This is how you define each section:
<a id="content">Your content would go here.</a>
This is how you link to each section:
<a href="#content">Link to content</a>
This wasn’t enough for me, though, as I wanted it to automatically scroll to the content on each blog post so that my new header wasn’t causing visitors have to scroll to find the content. They’d end up hating me!
I found a nifty little jQuery script which automatically scrolls to a defined ID on your page.
First, we need to connect to the jQuery library file:
Next, we need to define our ID (#content) as well as scroll speed (currently 3000):
You saw this script in action when you loaded this post – isn’t it cool?
I’m actually only using it on my blog posts, though, not my entire site. I decided that visitors needed to see my beautiful new header when viewing normal pages of my site. Not sure they’ll agree, though!