Why is Infinite Scroll scrolling to #top?

[Whelan]

Hi Thanks for the latest theme and plugin updates.

I have a small issue on my blog page:

https://charityfasttrack.uk/news-views

I have a “load more” Infinite Scroll button. It works but also scrolls to the top of the page and appends the #top anchor – which is confusing for the visitor.

Is there a conflict with the code I inserted in my child theme functions.php – see below:

// https://docs.generatepress.com/article/generate_smooth_scroll_elements/
add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
  $elements[] = 'a[href*="#"]';
  
  return $elements;
} );

When I remove this code, clear cache etc. and then use the “load more” button, it loads the extra posts without scrolling away – which is good, but…

I need both functions to work, ie. load more, plus apply smooth-scroll to all anchor links, even when pointing to different pages. Are the two compatible?

I also expected load-more to append “/page2” to the URL. Is pagination possible with InfiniteScroll?

[David]

Hi there,

where is the smoothscroll being used ? Then we could make the wildcard href tag more specific to those pages / posts.

And this is Tom’s response regarding pagination:

https://generatepress.com/forums/topic/infinite-scroll-and-pagination/#post-943010

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Whelan]

Hi David

The client may want to add more anchors in the future… but at the moment, they’re all on one page:

https://charityfasttrack.uk/courses/12-week-foundation-course/#faqs
https://charityfasttrack.uk/courses/12-week-foundation-course/#tab-title-description
https://charityfasttrack.uk/courses/12-week-foundation-course/#experts
https://charityfasttrack.uk/courses/12-week-foundation-course/#itinerary

—-

PS Yes, I saw Tom’s post – I now realise
https://charityfasttrack.uk/news-views/page/2/ does work if you specifically type it into the browser’s URL bar. I was just hoping that it would automatically update when “load more” is clicked. This feature is by no means essential.

[David]

So try this filter:

add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
    if ( is_single() ) {
        $elements[] = 'a[href*="#"]';
    }
  return $elements;
} );

Then it shouldn’t apply to Archives

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Whelan]

Thanks

can I add it using Elements? Is it a hook?

… I’d prefer keeping all mods there rather than adding to my child theme > functions.php.

[David]

Unfortunately not – Filters need to go in your child theme functions file.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Whelan]

OK. It’s added and so far, all good.

Many thanks

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts