Scroll down to specific contact onclick a letter

I created a contact list agenda with a contact-alphapets sidebar filter. What Im trying to achieve is when clicking on a specific letter it will scroll down to the first contact that start with the Letter chosen.
Exemple when I click on Letter A it will scroll down to contacts that starts with the letter A.

Here the code Im using:

HTML part:

<div class="contact-box clearfix">
    <div class="contact-cat col-xs-12 col-sm-4 col-lg-3">
        <div class="roles-menu">
            <ul class="nav">                                            
                <li class="contacts_tab active" rel="customers"><a href="#customers">Customers</a></li>
                <li class="contacts_tab" rel="suppliers"><a href="#suppliers">Suppliers</a></li>
            </ul>
        </div>
    </div>
    <div class="contacts-list col-xs-12 col-sm-8 col-lg-9">
        <ul class="contact-list" id="contact-list" >
            <!-- DISPLAY CONTACTS LIST WITH AJAX-->
        </ul>      
    </div>
    
    <div class="contact-alphapets">
        <div class="alphapets-inner">
            <a href="#" id="A" class="findContact" rel="A">A</a>
            <a href="#" id="B" class="findContact" rel="B">B</a>
            <a href="#" id="C" class="findContact" rel="C">C</a>
            <a href="#" id="D" class="findContact" rel="D">D</a>
            <a href="#" id="E" class="findContact" rel="E">E</a>
            <a href="#" id="F" class="findContact" rel="F">F</a>
            <a href="#" id="G" class="findContact" rel="G">G</a>
            <a href="#" id="H" class="findContact" rel="H">H</a>
            <a href="#" id="I" class="findContact" rel="I">I</a>
            <a href="#" id="J" class="findContact" rel="J">J</a>
            <a href="#" id="K" class="findContact" rel="K">K</a>
            <a href="#" id="L" class="findContact" rel="L">L</a>
            <a href="#" id="M" class="findContact" rel="M">M</a>
            <a href="#" id="N" class="findContact" rel="N">N</a>
            <a href="#" id="O" class="findContact" rel="O">O</a>
            <a href="#" id="P" class="findContact" rel="P">P</a>
            <a href="#" id="Q" class="findContact" rel="Q">Q</a>
            <a href="#" id="R" class="findContact" rel="R">R</a>
            <a href="#" id="S" class="findContact" rel="S">S</a>
            <a href="#" id="T" class="findContact" rel="T">T</a>
            <a href="#" id="U" class="findContact" rel="U">U</a>
            <a href="#" id="V" class="findContact" rel="V">V</a>
            <a href="#" id="W" class="findContact" rel="W">W</a>
            <a href="#" id="X" class="findContact" rel="X">X</a>
            <a href="#" id="Y" class="findContact" rel="Y">Y</a>
            <a href="#" id="Z" class="findContact" rel="Z">Z</a>
        </div>
    </div>
</div>

Display contacts with ajax/jquery

var baseUrl = $('#baseUrl').val();
$('.contacts_tab').on('click', function(){
    
    var params = $(this).attr('rel');
    $('#contact-list > li').remove();

    $.ajax({
        url: `${baseUrl}api/contacts/list.php?params=${params}`,
        success: function (result) {
            
            $.each(result, function(index, data) {
                var html = `<li class="${data.firstname.slice(0,1)}">`;
                    html += '<div class="contact-cont">';
                    html += '<div class="pull-left user-img m-r-10">';
                    html += `<a href="" title="${data.firstname} ${data.lastname ?? ''}"><img src="${baseUrl}public/attachements/${params}/${data.logo}" alt="" class="w-40 img-circle"></a>`;
                    html += '</div>';
                    html += '<div class="contact-info">';
                    html += `<span class="contact-name text-ellipsis">${data.firstname} ${data.lastname ?? ''}</span>`;
                    html += `<span class="contact-date"><i class=""><a href="tel:${data.phone}">${data.phone}</a></span>`;
                    html += '</div>';
                    html += '</div>';
                    html += '</li>';
                                       
                    $("#contact-list").append(html);
            });    
        }
    });
})

The code above works just fine.

Here is the code I tried for the scroll down:

$(".findContact").on('click', function(e){
    e.preventDefault();
    var findContact = $(this).attr('rel');    
    $('html,body').animate({ scrollTop: $(`.${findContact}`).offset().top},  'slow');
})

**