Problems getting a div scrolled to list item

Hi everybody.
I'm workin on an application with get a list of contacts from both Gmail and Outlook: the code works fine and for each account I get my beautyful list filled with contacts. Since the list is huge, I placed on top a navigation built on alphabet: the goal is to allow the user to click a letter and jump directly to the first item whose email starts with that letter.

This is the markup:

function fetch(token) {
	var listOwner;
	listOwner = 'Your contacts from Gmail';
	jQuery('#list-owner').text(listOwner);
	jQuery('#sharing-mail-contacts').slideDown();
	jQuery.ajax({
		url: "https://www.google.com/m8/feeds/contacts/default/full?access_token=" + token.access_token + "&max-results=1000&alt=json",
		dataType: "jsonp",
		success: function (contacts) {
			console.log(contacts);
			if ( contacts['feed']['entry'] !== '' ) {
				var profileImageUrl, emailOwner, emailAddress;
				var email_array = [];
				for ( var i = 0;i < contacts['feed']['entry'].length;i++ ) {
					if ( contacts['feed']['entry'][i]['gd$email'] != null ) {
						emailAddress = contacts['feed']['entry'][i]['gd$email'][0]['address'];
						if ( contacts['feed']['entry'][i]['title']['$t'] != null &&
										contacts['feed']['entry'][i]['title']['$t'] != '' ) {
							emailOwner = contacts['feed']['entry'][i]['title']['$t'];
						} else {
							emailOwner = '';
						}
						email_array.push(emailAddress + '#' + emailOwner);
					}
				}
				email_array.sort();
				var first_letter;
				for ( var i = 0;i < email_array.length;i++ ) {
					var els = email_array[i].split('#');
					var new_first_letter = els[0].substring(0, 1).toLowerCase();
					if ( new_first_letter != first_letter )
					{
						first_letter = new_first_letter;
						var html = '<li class="contacts" id="' + first_letter + '"><a name="' + first_letter + '"><input name="checkboxG5" id="checkbox' + i + '" value="' + els[0] + '" class="css-checkbox" type="checkbox"><label for="checkbox' + i + '" class="css-label"><span class="contact-address">' + els[0] + '</span> <span class="contact-name">(' + els[1] + ')</span></label></a><li>';
						if ( html !== '' ) {
							jQuery('#mail-contacts').append(html);
						}
					} else {
						var html = '<li class="contacts"><input name="checkboxG5" id="checkbox' + i + '" value="' + els[0] + '" class="css-checkbox" type="checkbox"><label for="checkbox' + i + '" class="css-label"><span class="contact-address">' + els[0] + '</span> <span class="contact-name">(' + els[1] + ')</span></label><li>';
						if ( html !== '' ) {
							jQuery('#mail-contacts').append(html);
						}
					}
				}
				jQuery('#mail-contacts li').each(function () {
					if ( jQuery(this).html() === '' ) {
						jQuery(this).remove();
					}
				});
				jQuery('#contacts-wrapper').mCustomScrollbar();
			}
		}
	});
}

Select allOpen in new window

At line 27 I check for the first letter of emaiol address: if the first letter appears for the first time I set for that ite an unique id.
Here's the markup:

<div id="sharing-mail-contacts">
	<div id="contacts-header">
		<img class="img-responsive" src="assets/sat_images/user-logo.png" /><img class="img-responsive" src="assets/sat_images/logo.png" /><span id="list-owner"></span>
	</div>
	<p id="contacts-tip">Please, select the contacts you want share the card with and press 'Share this card' button to send them your card image.</p>
	<p>
		<a class="alpha" href="#a">A</a>&nbsp;
		<a class="alpha" href="#b">B</a>&nbsp;
		<a class="alpha" href="#c">C</a>&nbsp;
		<a class="alpha" href="#d">D</a>&nbsp;
		<a class="alpha" href="#e">E</a>&nbsp;
		<a class="alpha" href="#f">F</a>&nbsp;
		<a class="alpha" href="#g">G</a>&nbsp;
		<a class="alpha" href="#h">H</a>&nbsp;
		<a class="alpha" href="#i">I</a>&nbsp;
		<a class="alpha" href="#j">J</a>&nbsp;
		<a class="alpha" href="#l">L</a>&nbsp;
		<a class="alpha" href="#m">M</a>&nbsp;
		<a class="alpha" href="#n">N</a>&nbsp;
		<a class="alpha" href="#o">O</a>&nbsp;
		<a class="alpha" href="#p">P</a>&nbsp;
		<a class="alpha" href="#q">Q</a>&nbsp;
		<a class="alpha" href="#r">R</a>&nbsp;
		<a class="alpha" href="#s">S</a>&nbsp;
		<a class="alpha" href="#y">T</a>&nbsp;
		<a class="alpha" href="#u">U</a>&nbsp;
		<a class="alpha" href="#v">V</a>&nbsp;
		<a class="alpha" href="#w">W</a>&nbsp;
		<a class="alpha" href="#x">X</a>&nbsp;
		<a class="alpha" href="#y">Y</a>&nbsp;
		<a class="alpha" href="#z">Z</a>
	</p>
	<div id="contacts-wrapper">
		<ul id="mail-contacts">

		</ul>
	</div>
</div>

Select allOpen in new window

When the contacts are fetched the ul #mail-contacts is filled with data.
Then, I tried several solution to scroll to the selected item. As you can see, I tried to use anchors, but this, though it work, looks bad, even the whle body scrolls down and if I click in another part of the page the list scrolls up again.
So I created the ids and used this code:

jQuery('.alpha').on('click', function (e) {
	e.preventDefault();
	var letter = jQuery(this).text().toLowerCase();
	var aTag = jQuery("li."+letter).first();
	jQuery(aTag).get(0).scrollIntoView();
});

Select allOpen in new window

or

	var letter = jQuery(this).text().toLowerCase();
	var container = jQuery('#contacts-wrapper');
	var scrollTo = jQuery("li#" + letter);
	console.log('container top '+container.offset().top);
	console.log('scroll top '+scrollTo.offset().top);
	container.animate({scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()});
});

Select allOpen in new window

and even this brutal, desperate code:

jQuery('.alpha').on('click', function (e) {
	e.preventDefault();
	var container = jQuery('#contacts-wrapper');
	container.scrollTop(960);
});

Select allOpen in new window

Where set up, in console I see values for offset().top, but the list remains fixed.
Thank you for any help :-)
Cheers