Archived topic

Why is Infinite Scroll scrolling to #top?

7 replies · Started by Whelan on November 21, 2019

Viewing posts 1–8 of 8

November 21, 2019 at 5:12 am #1070267

Hi Thanks for the latest theme and plugin updates.

I have a small issue on my blog page:

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?

November 21, 2019 at 7:50 am #1070896

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

November 21, 2019 at 9:32 am #1071091

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.

November 21, 2019 at 9:48 am #1071105

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

November 22, 2019 at 11:06 am #1072984

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.

November 22, 2019 at 1:21 pm #1073109

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

November 23, 2019 at 5:30 am #1073607

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

Many thanks

November 24, 2019 at 11:25 am #1075096

Glad we could be of help

This archived topic is closed to new replies.

Start building better websites today.