Scrolling Issue

  • lindiwp

    (@lindiwp)


    7 years, 3 months ago

    Hi Daniel,

    First of all I want to thank you for the awesome work you have done.

    Your plugin is better than Paid ones (Y)

    I have a sticky header in my page and when I click at a Letter, it scroll a little bit below then the Letter. Could I fix this to show a bit higher?

    Also, I need to translate the “back to top” in my language? How can I do that? I would also be interested to translate letter that is added to the URL (example: /page?letter) in my language.

    Hope you could help me out here.

Viewing 1 replies (of 1 total)
  • Plugin Author Dani Llewellyn

    (@diddledani)

    7 years, 3 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 );
        });
    });
}

    Translations are handled by the WordPress.org GlotPress project. You can translate the plugin at https://translate.wordpress.org/projects/wp-plugins/a-z-listing

Viewing 1 replies (of 1 total)

The topic ‘Scrolling Issue’ is closed to new replies.

Tags