Search results updated - Scroll to ID or specific place on page

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

Problem: I would like to scroll to a specific item on the page by ID when AJAX search results are updated.

Solution: Use the js_event_wpv_parametric_search_results_updated event hook to trigger custom JavaScript after AJAX search results are updated.

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function() {
    /**
    * data.view_unique_id (string) The View unique ID hash
    * data.layout (object) The jQuery object for the View layout wrapper
    */
jQuery('html, body').animate({ scrollTop: jQuery("#search-space").offset().top }, 'slow');
});  // this line was missing before

Relevant Documentation:
https://toolset.com/documentation/user-guides/adding-custom-javascript-views/

This support ticket is created 6 years, 7 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
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Views, Views plugin

This topic contains 7 replies, has 3 voices.

Last updated by hemsecM 6 years, 7 months ago.

Assisted by: Christian Cox.

Author

Posts

June 4, 2018 at 2:45 pm #908392

leilaG

We are using the below code to scroll to the top of page after search results updated, but our view is place in the middle of the page, is it possible to scroll to the top of the view or a page element ID?

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function() {
/**
* data.view_unique_id (string) The View unique ID hash
* data.layout (object) The jQuery object for the View layout wrapper
*/
jQuery('html, body').animate({ scrollTop: 0 }, 'slow');

June 5, 2018 at 1:54 pm #908875

Christian Cox

You can scroll to any element by ID using the jQuery offset method to calculate its position in the document:

jQuery('html, body').animate({ scrollTop: jQuery("#elementtoScrollToID").offset().top }, 'slow');

http://api.jquery.com/offset/

June 5, 2018 at 3:39 pm #908997

leilaG

I tried the below code but it's not working -

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function() {
jQuery('html, body').animate({ scrollTop: jQuery("#search-space").offset().top }, 'slow');

Am I missing something?

June 5, 2018 at 7:19 pm #909089

Christian Cox

May I see this View on your site? I would like to see what's happening in the browser.

June 6, 2018 at 7:39 am #909216

leilaG

hidden link (bottom of the page)

June 6, 2018 at 2:49 pm #909405

Christian Cox

The code is repeated, and both times it's missing a closing brace and parenthesis. You can see the error if you open the browser console - "Unexpected end of input". Try this:

// View: Available space with Sort - start
//-----------------------------------------
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function() {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
jQuery('html, body').animate({ scrollTop: jQuery("#search-space").offset().top }, 'slow');
});  // this line was missing before

//-----------------------------------------
// View: Available space with Sort - end
//-----------------------------------------

June 7, 2018 at 9:42 am #909791

leilaG

Amazing that worked! Thank you so much!

January 8, 2019 at 3:27 pm #1180118

hemsecM

Hi Christian, not sure if you can help on this thread anymore however this response not working for me:
I have search form on home page, which when submitted goes to my product page, this works fine, but i need it to then automatically scroll down to an id i have labelled #product-select.

i have used your code to say the following:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function() {
    /**
    * data.view_unique_id (string) The View unique ID hash
    * data.layout (object) The jQuery object for the View layout wrapper
    */
jQuery('html, body').animate({ scrollTop: jQuery("#product-select").offset().top }, 'slow');
});  // this line was missing before

but am having no joy with the scroll. it stays at top of page and the url doesnt change to show an added ID.

Can you advise?

New threads created by Christian Cox and linked to this one are listed below:

https://toolset.com/forums/topic/scroll-to-id-or-specific-place-on-page-when-search-results-are-updated/