theming anchor links

  • Resolved chasperlisimba

    (@chasperlisimba)


    7 years, 4 months ago

    Hi there

    Plugin works great. But I have some problems with the anchors:

    1. How can I change the URL of the az-links from /#letter-A to !#/letter-A?
    2. How can I add the class “anchor-link” to every letter in the az-links?
    3. I use the theme the7 and the anchor doesn’t recognize the height of the header / sticky header. so it scrolls always below the letter…

    With 1. and 2. I can achieve the smooth scroll feature of the theme 🙂

    Would be cool to fix this

    Best and thanks a lot

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter chasperlisimba

    (@chasperlisimba)

    7 years, 4 months ago

    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… 🙂

    Plugin Author Dani Llewellyn

    (@diddledani)

    7 years, 4 months ago

    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 );
        });
    });
}
    Thread Starter chasperlisimba

    (@chasperlisimba)

    7 years, 4 months ago

    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 🙂

    Plugin Author Dani Llewellyn

    (@diddledani)

    7 years, 4 months ago

    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 7 years, 4 months ago by Dani Llewellyn. Reason: fix code formatting
    Thread Starter chasperlisimba

    (@chasperlisimba)

    7 years, 4 months ago

    Hey Daniel

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

    Best

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘theming anchor links’ is closed to new replies.