Create A-Z Index of custom post-type Posts without plugin

My posts are being displayed in alphabetical order, but I want to have an index kind of page with a navigation bar like A | B | C | and so on…
It would be super cool if when I click on B the page scrolled down to the first post whose title begins with the letter “B”.
Or, if easier, just a list of the letters of the alphabet and once I click on a letter the respective posts just toggle.

I read this before but I can’t get along with it.

This is my current page template (just displaying posts alphabetically):

<?php
$page_id = 417;
$page = get_post($page_id);
$title = get_the_title($page_id);
echo "
<header class='page-header'>
<h3 class='page-title'>$title</h3>
</header>
<p>$page->post_content</p>
<hr class='divideposts'>";

$args = array(
'post_type' => 'locations',
'orderby' => 'title',
'order' => 'ASC',
'posts_per_page'=> '20',);

$loop = new WP_Query( $args );
if( $loop->have_posts() ): while( $loop->have_posts() ): $loop->the_post(); global $post;

get_template_part( 'content', get_post_format());

endwhile;
endif;
?>

Help is much appreciated.