Taxonomy term links grouped by alphabets in WordPress

Question

In my website, I have created a custom taxonomy term called. All links of this term appear in the same page here. I managed to make them appear in groups in that page, by first letter of the alphabet with an alphabet navigation while being able to jump back from each letter's list with an arrow, using the following customization in functions.php and custom.css files.

I have two problems:

1. The alphabet at the top of the page is not responsive.
2. When I choose a letter, I don't jump at the top of this letter's list, but at the end. When I pic the arrow to go back to the alphabet, I don't get there, but at the top of first letter's list.

Any ideas on how to fix these two problems?

// Taxonomy term links grouped by alphabets
function sk_alphabetical_archives( $atts ) {

    // Pull in shortcode attributes and set defaults
    $atts = shortcode_atts( array(
        'taxonomy' => 'post_tag'
    ), $atts, 'alphabetical-archives' );

    // https://codex.wordpress.org/Function_Reference/sanitize_key
    $taxonomy = sanitize_key( $atts['taxonomy'] );

    $jump_links = '';
    $list = '';

    // get all the terms and store in $terms variable
    $terms = get_terms( $taxonomy );

    $groups = array();

    if ( $terms && is_array( $terms ) ) {

        // for each term
        foreach( $terms as $term ) {
            // obtain the first letter and store it in $first_letter variable
            $first_letter = mb_strtoupper( mb_substr( $term->name, 0, 1 ) );

            // set the key of $groups array to the first letter and its corresponding value as the term. Remember array has key => value pairs.
            $groups[ $first_letter ][] = $term;
        }

        if ( ! empty( $groups ) ) {

            $list .= '<div class="term-groups">';

            foreach( $groups as $letter => $terms ) {
                $jump_links .=  '<a href="#'. $atts['taxonomy'] . '-' . $letter .'">' . $letter . '</a>';

                $list .= '<div class="terms-group" id="'. $atts['taxonomy'] . '-' . $letter .'"><h4>' . apply_filters( 'the_title', $letter ) . '<span class="to-top"><a href="#'. $taxonomy .'_top" title="back to top"><i class="icon ion-ios-arrow-thin-up"></i></a></span></h4>';

                $list .= '<ul>';
                    foreach( $terms as $term ) {
                        $list .= '<li><a href="' . esc_url( get_term_link( $term ) ) . '" alt="' . esc_attr( sprintf( __( 'View all post filed under %s', 'my_localization_domain' ), $term->name ) ) . '">' . $term->name . '</a> <em>(' . $term->count. ')</em></li>';
                    }
                $list .= '</ul></div>';
            }

            $jump_links_html .= '<div class="alphabetical-terms"><div class="jump-links" id="'. $taxonomy .'_top">' . $jump_links . '</div>';

            $list .= '</div></div>';

        }
    }

    // else {
    //  $list .= '<p>Sorry, no items were found</p>';
    // }

    return $jump_links_html . $list;

}
add_shortcode( 'alphabetical-archives', 'sk_alphabetical_archives' );

CSS

/* Taxonomy term links grouped by alphabets */

.alphabetical-terms a {
    color: #101010;}
.alphabetical-terms a:hover {
    color: #488bca;}
.alphabetical-terms a:visited {
    color: #202020;}
.jump-links {
    padding: 5px 0;}
.jump-links a {
    padding: 7px 10px;
    margin-right: 5px;
    border: 1px solid #202020;}
.jump-links a:hover {
    background: #488bca;
    color: #fff;
    border: 1px solid #202020;}
.terms-group {
    overflow: hidden;
    border-bottom: 1px solid #eee;       padding: 20px 0 10px; 
    margin: 0 0 10px;}
.terms-group:last-child {
    border-bottom:none;}
.jump-links:focus,
.terms-group:focus {
    outline: none;}
.terms-group h4 {
    color: #202020;}
.terms-group ul {
    margin: 0; }
.terms-group ul li {
margin: 0 1.5% 5px 0; list-style-type: none; text-overflow: ellipsis; white-space: nowrap; overflow:hidden; position: relative;
    right: 17px;}
.terms-group em {
font-size: 14px; font-style:normal;}

@media only screen and (min-width: 501px) {

    .terms-group ul {
        -moz-column-count: 3;
        -moz-column-gap: 15px;
        -webkit-column-count: 3;
        -webkit-column-gap: 15px;
        column-count: 3;
        column-gap: 15px;}

}

.terms-group ul > li {
    list-style-type: none;}

.terms-group ul li:before {
    content: '\2022'; /* 'î “' */
    margin: 0 6px 0 -8px;}

.to-top {
    float: right;}
.to-top a {
    padding: 10px 20px;}
.to-top a:visited {
    color: #202020;}