JSFiddle - React, Tailwind, and code Playground
HTML
<div align="center">
<blockquote>
<h3><strong><span class="a">A</span> - <span class="b">B</span> - <span class="c">C</span> - <span class="d">D</span> - <span class="e">E</span> - <span class="f">F</span> - <span class="g">G</span> - <span class="h">H</span> - <span class="i">I</span> - <span class="j">J</span> - <span class="k">K</span> - <span class="l">L</span> - <span class="m">M</span><br />
<span class="n">N</span> - <span class="o">O</span> - <span class="p">P</span> - <span class="q">Q</span> - <span class="r">R</span> - <span class="s">S</span> - <span class="t">T</span> - <span class="u">U</span> - <span class="v">V</span> - <span class="w">W</span> - <span class="x">X</span> - <span class="y">Y</span> - <span class="z">Z</span></h3>
<p></p>
</blockquote>
</div>
<ul class="holo-list" id="A">
<p>A</p>
<li>ADRC (Aging $Disability Resource Connection): 1-877-222-3737</li>
<li>AIDS Drug Distribution Program Hotlin: 1-877-613-4533</li>
<li>AIDS/HIV, STD, and TB Health Insurance Continuation Program Hotline: 1-800-353-3232</li>
<li>AIDS/STD Hotline: 1-800-624-2377</li>
<li>AIDS/HIV, STD, TB Testing Hotline: 1-866-HIV-CHECK (1-866-448-2432)</li>
<li><a href="http://www.state.nj.us/humanservices/das/home/index.html">Alcohol and Drug Issues</a>
</li>
<li>Animal Spay/Neuter Programs: 609-826-4872</li>
</ul>
<ul class="holo-list" id="B">
<p>B</p>
<li>Birth Certificates/Other Vital Records: 1-966-649-8726</li>
<li>Board of Medical Examiners: 1-609-826-4087</li>
</ul>
<ul class="holo-list" id="C">
<p>C</p>
<li>Camp Saftey: 609-826-4941</li>
<li>Cancer Edulcation and Early Detection: 1-800-328-3838</li>
<li>Cancer Patients/Resource Info: 609-984-5148</li>
<li>Center for Health Statistics: 609-984-6702</li>
<li>Charity Care: 1-866-588-5696</li>
<li>Community Choice Counseling for Nursing Home Residents: 1-877-856-0877</li>
...
JavaScript
$('.a').click(function(){
$('html, body').animate({scrollTop:$('#A').position().top}, 'slow');
});
$('.b').click(function(){
$('html, body').animate({scrollTop:$('#B').position().top}, 'slow');
});
$('.c').click(function(){
$('html, body').animate({scrollTop:$('#C').position().top}, 'slow');
});
$('.d').click(function(){
$('html, body').animate({scrollTop:$('#D').position().top}, 'slow');
});
$('.e').click(function(){
$('html, body').animate({scrollTop:$('#E').position().top}, 'slow');
});
$('.f').click(function(){
$('html, body').animate({scrollTop:$('#F').position().top}, 'slow');
});
$('.h').click(function(){
$('html, body').animate({scrollTop:$('#H').position().top}, 'slow');
});
$('.i').click(function(){
$('html, body').animate({scrollTop:$('#I').position().top}, 'slow');
});
$('.l').click(function(){
$('html, body').animate({scrollTop:$('#L').position().top}, 'slow');
});
$('.m').click(function(){
$('html, body').animate({scrollTop:$('#M').position().top}, 'slow');
});
$('.n').click(function(){
$('html, body').animate({scrollTop:$('#N').position().top}, 'slow');
});
$('.o').click(function(){
$('html, body').animate({scrollTop:$('#O').position().top}, 'slow');
});
$('.p').click(function(){
...