Support » Plugin: A-Z Listing » theming anchor links

  • Resolved chasperlisimba

    (@chasperlisimba)


    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)
  • 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 Daniel Llewellyn

    (@diddledan)

    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 🙂

    Plugin Author Daniel Llewellyn

    (@diddledan)

    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 5 months, 1 week ago by  Daniel Llewellyn. Reason: fix code formatting

    Hey Daniel

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

    Best

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.