1
\$\begingroup\$

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.

\$\endgroup\$
1
\$\begingroup\$

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');
   }
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.