How to avoid repeating / shorten my code?

How to avoid repeating / shorten my code?

Presently i have this to animate my scroll,
<script>
$(document).ready(function() {
var navX1 = $('li.x32_01 a'),
navX2 = $('li.x32_02 a'),
navX3 = $('li.x32_03 a'),
navX4 = $('li.x32_04 a');
navX5 = $('li.x32_05 a');
navX6 = $('li.x32_06 a');
navX1.click(function(){
$('html, body').animate( {scrollTop: $('#intro').offset().top - 50 }, 1700, "swing" );
return false;
    });
navX2.click(function(){
$('html, body').animate( {scrollTop: $('#second').offset().top - 50 }, 1700, "swing" );
return false;
});

navX3.click(function(){
$('html, body').animate( {scrollTop: $('#third').offset().top - 50 }, 1700, "swing" );
return false;
    });
navX4.click(function(){
$('html, body').animate( {scrollTop: $('#fifth').offset().top - 50 }, 1700, "swing" );
return false;
    });
navX5.click(function(){
$('html, body').animate( {scrollTop: $('#trendingNow').offset().top - 50 }, 1700, "swing" );
return false;
    });
navX6.click(function(){
$('html, body').animate( {scrollTop: $('#xpMore').offset().top - 50 }, 1700, "swing" );
return false;
    });
   
        });

</script>


I try this but this is not working,://. Can some one please help me here..

<script>
$(document).ready(function() {
  var navX1 = $('li.x32_01 a'),
navX2 = $('li.x32_02 a'),
navX3 = $('li.x32_03 a'),
navX4 = $('li.x32_04 a');
var myControls = [
navX1, 
navX2, 
navX3, 
navX4
]; 
var scrollTargets = [
'#intro',
'#second',
'#third',
'#fifth'
]; 
for(var i =0; i<5; i++){
myControls[i].click(function(){
$('html, body').animate( {scrollTop: $(scrollTargets[i]).offset().top - 50 }, 2500, "swing" );
return false;
});  
}
});
</script>