WWL TOC Blog Animation

blog-toc.js

/* ----------------------------- TOC -------------------------- */
/* --------------------------- jQuery ------------------------- */
/* Im span wird "^" verwendet, mit einem Icon tauschbar ------- */
/* In delta wird die genaue Zielposition festgelegt ----------- */

$( '.toc-header' ).wrap( '<div class="toc wrap" />' )
    .after( '<span class="toc-item toc-icon header">^</span>' );

$( '#toc-ol li, div.toc.wrap' ).on( 'click', function( e )
{

    e.preventDefault();

    let delta = 15;
    let t = $( this );
    let wid = ( $( window ).width() < 981 ? 0 : 90 ) + delta;
    let elem, index;

    if ( t.hasClass( 'wrap' ) )
        elem = $( '#toc' );

    else
    {

        index = $( '#toc-ol li' ).index( t );
        elem  = $( '.toc-header' ).eq( index );

    }

    if ( elem.length < 1 )
        return false;

    $( 'html, body' ).animate({ scrollTop: elem.offset().top - wid }, 200, 'swing', function() { return false; });

});

// Zur Nutzung in Vanilla JS bietet sich folgender Converter an:
// https://rakeshid03.github.io/Jquery-to-Javascript-Code-Converter/