Skip Navigation

[Resolved] Clicking next the page does not go to the top. Read more link disappears.

This thread is resolved. Here is a description of the problem and solution.

Problem:
When clicking the next link at the bottom of the page I expected to go to the top of the next page.
Solution:
There isn't such a built-in feature within Views plugin, but you can try with some custom JS codes, for example:
1) Edit your view, find the "next" and "Previous" link shortcode, add attribute class="scroll-to-top" in it, for example:

[wpv-pager-prev-page force="true" class="scroll-to-top"][wpml-string context="wpv-views"]Previous[/wpml-string][/wpv-pager-prev-page]
[wpv-pager-next-page force="true" class="scroll-to-top"][wpml-string context="wpv-views"]Next[/wpml-string][/wpv-pager-next-page]

2) in section "Filter Editor", click "JS editor", add below JS codes:

function scroll_to_top(){
  jQuery("a.scroll-to-top").click(function(event) {
    jQuery("html, body").animate({ scrollTop: 0 }, "slow"); // jump to the page top
    event.preventDefault()
  });
}
 
jQuery( document ).on('js_event_wpv_pagination_completed', function( event, data ) { // when ajax pagination is completed
  scroll_to_top();
});
scroll_to_top(); 

And test again.
Relevant Documentation:

This support ticket is created 7 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 2 replies, has 2 voices.

Last updated by davidM-17 7 years, 2 months ago.

Assisted by: Luo Yang.

Author
Posts
#568529

I am trying to: Paginated view on home page

Link to a page where the issue can be seen: hidden link

I expected to see: When clicking the next link at the bottom of the page I expected to go to the top of the next page. Also, on the next page, I expect to see the "Read more" link like on the first page.

Instead, I got: Instead, it goes to the next page, but the bottom. The read more links are gone.

I'm wondering if pagination got broken on a recent update? I tried changing themes and got the same issue. I tried it using 2012 theme on local host and got same issue.

#568634

Dear David,

There isn't such a built-in feature within Views plugin, but you can try with some custom JS codes, for example:
1) Edit your view, find the "next" and "Previous" link shortcode, add attribute class="scroll-to-top" in it, for example:

[wpv-pager-prev-page force="true" class="scroll-to-top"][wpml-string context="wpv-views"]Previous[/wpml-string][/wpv-pager-prev-page]
[wpv-pager-next-page force="true" class="scroll-to-top"][wpml-string context="wpv-views"]Next[/wpml-string][/wpv-pager-next-page]

2) in section "Filter Editor", click "JS editor", add below JS codes:

function scroll_to_top(){
  jQuery("a.scroll-to-top").click(function(event) {
    jQuery("html, body").animate({ scrollTop: 0 }, "slow"); // jump to the page top
    event.preventDefault()
  });
}

jQuery( document ).on('js_event_wpv_pagination_completed', function( event, data ) { // when ajax pagination is completed
  scroll_to_top();
});
scroll_to_top(); 

And test again.

#568928

Hi Luo,

I thought that the paging did go to the top of the page, which is the normal behavior. I guess I was wrong. Thanks for the instructions. They worked fine.

Best regards,

David