jQuery navigation bar

Question

I have a navigation bar without a tags:

 $('div.nav ul li').on('click', function() {
 if($(this).is(':first-child')) {
 $("html, body").animate({
 scrollTop: "0"
 }, 'slow');
 } else if($(this).is(':nth-child(2)')) {
 $("html, body").animate({
 scrollTop: "0"
 }, 'slow');
 } else if($(this).is(':nth-child(3)')) {
 var offset = $('div.features').offset().top;
 $("html, body").animate({
 scrollTop: offset+ 'px'
 }, 'slow');
 } else if($(this).is(':nth-child(4)')) {
 var offset = $(document).height();
 $("html, body").animate({
 scrollTop: offset+ 'px'
 }, 'slow');
 }
 });

I wondered if this way is the best way of doing this. first-child & nth-child(2) goes to the same place, then each child after that - up to 4 has a different position to go to.

Answer 1

Yes,

you could for starters derive the child position once with

var index = $('div.nav ul li').index( this )

Then you could adapt to index 0 and 1 in 1 if statement Finally, you could just derive the index and have the animate statement only once.

Something like this in the end might do:

$('div.nav ul li').on('click', function() {
 var index = $('div.nav ul li').index( this ), top;
 if( index < 2 ){
 top = '0';
 }
 if( index == 2 ){
 top = $('div.features').offset().top + 'px'; 
 }
 if( index == 3 ){
 top = $(document).height() + 'px'; 
 }
 if(top){
 $("html, body").animate({
 scrollTop: "0"
 }, 'slow');
 }
});