Scroll to ID or specific place on page when search results are updated

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

Problem: I would like to scroll to a specific place on the page when a page is loaded, but only if coming from a search form on another page. If loading the page directly, I do not want to scroll.

Solution: You can use JavaScript to test for a specific URL parameter on document ready, and then animate the scrolltop attribute.

jQuery(document).ready(function(){
  if( window.location.href.indexOf('wpv_filter_submit') > -1) {
     jQuery('html, body').animate({ scrollTop: jQuery("#product-select").offset().top }, 'slow');
  }
});

Relevant Documentation:
http://api.jquery.com/

This support ticket is created vor 6 Jahren. 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.

Dieses Thema wurde abgetrennt von https://toolset.com/de/forums/topic/search-results-updated-scroll-to-id-or-specific-place-on-page/

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)

Dieses Thema enthält 5 Antworten, hat 2 Stimmen.

Zuletzt aktualisiert von hemsecM vor 6 Jahren.

Assistiert von: Christian Cox.

Author

Artikel

Januar 8, 2019 at 3:31 pm #1180120

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?

Januar 8, 2019 at 3:36 pm #1180122

Christian Cox

Hi, this code was designed to work with AJAX updates in the same page. If you want to scroll to an element on a different page, you can try it without the event hook:

jQuery(document).ready(function(){
  jQuery('html, body').animate({ scrollTop: jQuery("#product-select").offset().top }, 'slow');
});

The problem with this approach is that sometimes the browser doesn't know how much content space should be placed above this product-select element until images and other styles have loaded in. If that happens after the document ready event, the scroll position may appear to shift.

Januar 8, 2019 at 4:09 pm #1180152

hemsecM

Beautiful! Works a charm.
Thank you.

Januar 8, 2019 at 4:22 pm #1180157

hemsecM

I spoke too soon - now when you visit the page directly (not via the search form) it scrolls to the results area.
Is this something that can be resolved?

Januar 8, 2019 at 5:51 pm #1180194

Christian Cox

You might be able to use custom JavaScript to test whether or not the URL has the parameter wpv_filter_submit. If so, scroll. If not, do not scroll.

jQuery(document).ready(function(){
  if( window.location.href.indexOf('wpv_filter_submit') > -1) {
     jQuery('html, body').animate({ scrollTop: jQuery("#product-select").offset().top }, 'slow');
  }
});

Januar 10, 2019 at 1:47 pm #1181495

hemsecM

My issue is resolved now. Thank you!