Scroll to an element while using dynamic navigation

[hyetou]

I have dynamic navigation turned on, and I'm trying to get the page to scroll to a certain point each time the first/previous/next/last nav buttons are clicked.

I tried some jQuery solutions which worked to scroll, but stopped it from being dynamic. I was excited to find https://github.com/mgsisk/webcomic/issues/67, but the solution there seems to have no effect for me.

I have an element with id="comicTop" in my header, and I put this at the bottom of my functions.php:

function custom_webcomic_url( $url, $the_post, $in_same_term, $excluded_terms, $taxonomy, $collection ) {
    return "{$url}#comicTop";
}

add_filter( 'get_first_webcomic_link', 'custom_webcomic_url' );
add_filter( 'get_previous_webcomic_link', 'custom_webcomic_url' );
add_filter( 'get_next_webcomic_link', 'custom_webcomic_url' );
add_filter( 'get_last_webcomic_link', 'custom_webcomic_url' );

However, the navigation buttons are unchanged.

I'm using Webcomic 4.3.2 and an Inkblot child theme. My site is www.GiantsTeeth.com

Any help is much appreciated!

[mgsisk]

It looks like there's a bug in Webcomic that prevents the appropriate get_{$relative}_webcomic_link filters from firing when they should. I'll be pushing a fix in just a moment, but I'm not sure when it will show up in the WordPress plugin directory. If you're adventurous, find this line in /webcomic/-/php/tags.php (833 in my copy):

$href     = false === strpos( $relative, 'nocache' ) ? apply_filters( 'the_permalink', get_permalink( $the_post ) ) : self::get_relative_webcomic_link( $relative, $in_same_term, $excluded_terms, $taxonomy, $collection, false );

and change it to look like this:

$href     = self::get_relative_webcomic_link( $relative, $in_same_term, $excluded_terms, $taxonomy, $collection, false );

[hyetou]

Well thanks so much for your help. That did indeed get the filters working, and now #comicTop is being added to the end of the url as it should be.

However, when dynamic navigation is on, and you navigate through comics, it doesn't actually make the page scroll to that point. The #comicTop at the end of the url has no effect. (This makes some sense to me since the page isn't actually reloading.)

Do you have ideas about how to make the page scroll to a certain point while dynamically navigating? I'd be happy even if I could just get it to go to the very top of the page, as is normal when dynamic navigation is off.

Thank you!

[mgsisk]

Ah hah… that's a trickier one. As you guessed, the #comicTop bit isn't having any effect with dynamic navigation because the browser isn't really navigating to a new URL. The trick is to force it to jump to the anchor via javascript, which you can do by editing /webcomic/-/js/dynamic.js. Find this function (starting on line 17):

function dynamic_webcomic( url, container ) {
    $.get( url, { webcomic_dynamic: container }, function( data ) {
        $( "[data-webcomic-container='" + container + "']" ).html( data ).show();
    } );
}

and change it to:

function dynamic_webcomic( url, container ) {
    $.get( url, { webcomic_dynamic: container }, function( data ) {
        $( "[data-webcomic-container='" + container + "']" ).html( data ).show();

        if (url.substr(url.indexOf('#'))) {
            $('html,body').scrollTop($(url.substr(url.indexOf('#'))).offset().top);
        }
    } );
}

I wouldn't call this one a bug, but I'll probably include this change in the next Webcomic update as an enhancement.

[hyetou]

Flawless. :)

Thank you for making and supporting this plugin. It's a joy to use.

[mgsisk]

Glad I could help, and glad you're enjoying Webcomic!