Web development is not just about pretty designs. It's not about technical brilliance. Instead, it requires a zealous cocktail of creative ingenuity, technical ability and an eye for how we as humans use the web. Then you push boundaries.

Animated Scroll with jQuery

Recently I had to write a piece of code that would smoothly scroll through a div until the selected anchor tag reached the top of the div. I tried searching for the answer on the web but only found scrollers that worked on the entire document, not just a div. The answer however is explained below...

function scrollToID(id){
distance = $('div.friend').index($('#'+id)) * 200;
$('div.friends_right').animate({scrollTop: distance },'slow');
}


The relative distance of our element within the div was calculated by first finding its index (i.e. where it is positioned amongst the other elements in the div) and then multiplying that number by the set height of each element (in this case 200px).

And its that easy!