theming anchor links

I tried this for point 1 and 2:

<script>
jQuery(document).ready(function() {
    mykey = document.getElementsByClassName('az-links');
    jQuery(mykey).find('a').addClass("anchor-link");
		jQuery(mykey).find('a').each(function(){
    this.href = this.href.replace('#', '!#/');
    });
});
</script>

But then the link is with the complete URL and not just with the anchor… ??

The anchors use the browser’s inbuilt functionality for scrolling the page to the appropriate position. This means that if you have anything on the page that is floating at the top of the window when you scroll it will obscure the target of the anchor. Browsers are unaware of these design decisions so you need to use javascript to intercept the anchor. The javascript below will move the page an extra 120 pixels down from the top of the viewport (the value -120 supplied to window.scrollBy()):

if ( document.readyState === 'loading' ) {
    document.addEventListener('DOMContentLoaded', fixAZListingScroll);
} else {
    fixAZListingScroll();
}
function fixAZListingScroll() {
    document.querySelectorAll( '.az-links a[href^="#letter-"]' )
    .forEach( function( a ) {
        a.addEventListener( 'click', function( e ) {
            e.preventDefault();
            const selector = this.href.replace( /.*(#letter-.*)/, '$1' );
            document.querySelector( selector ).scrollIntoView();
            window.scrollBy( 0, -120 );
        });
    });
}

Hi Daniel

Thanks ?? I found this script in your source.
Can you maybe help to change the anchor links from the az-links? for example from #letter-A to #!/letter-A. If I can get this its working with the theme perfect ??

jQuery(document).ready(function() {
    change_anchor = document.getElementsByClassName('az-links');
    jQuery(change_anchor).find('a').each(function(){
    this.href = this.href.replace('#', '!#/');
    });
});

This adds the whole link to the anchor… But there should just be the anchor ??

Best

PS: I know it’s customcode and I absolutly understand when you say no ??

• This reply was modified 6 years, 1 month ago by chasperlisimba.

You could try the following Javascript adapted from your own:

jQuery(document).ready(function() {
    change_anchor = document.getElementsByClassName('az-links');
    jQuery(change_anchor).find('a').each(function(){
        this.setAttribute('href', this.getAttribute('href').replace('#', '!#/'));
    });
});

• This reply was modified 6 years, 1 month ago by Dani Llewellyn. Reason: fix code formatting

Hey Daniel

?? Works perfect thank you for your help! ?? Really nice.

Best