An often-asked question is how to automatically scroll the page to the results (or to the top of the page or to another target), when using any facet, a specific facet, or even a specific facet choice. Below is a range of examples that should cover most scenarios.
The code in all examples runs on the facetwp-loaded event, which fires after each AJAX page load (meaning after each facet interaction), and also on the initial page load. With extra conditions, you can determine in which situation exactly the page should scroll. You can combine the mentioned conditions if needed.
Most examples scroll to the top of the results, which by definition is the element with class facetwp-template. If needed, you can customize the scroll target. You can also adapt the scroll scroll offset, the scroll duration/speed and easing.
Scroll on facet interaction after the initial page load
The following example scrolls the page to the top of the results (the element with class facetwp-template), after each facet interaction. Because the facetwp-loaded event fires after each AJAX page load, the page will scroll when any facet is used.
The code also demonstrates the use of the FWP.loaded variable in a condition. This variable is only true after the page has been loaded. This means the page will not scroll on the initial page load, also not if there are facet choices in the URL.
[scroll-fwploaded]
Scroll also on the initial page load
If you want the the above code to also work on the initial page load, remove the FWP.loaded condition. Note that this makes the page scroll on any page load, also when there are no facet choices in the URL on the initial page load.
[scroll-nofwploaded]
Scroll only on the initial page load
If you want to scroll the page only when the page initially loads, and not on the subsequent AJAX page loads (when interacting with facets), you can use ! FWP.loaded (where the ! means “not”). This condition is only true on the initial page load:
[scroll-notfwploaded]
Scroll when certain facets (or facet choices) are in use
In some situations, you may want the page to scroll only when a certain facet is used (or not used). Or even when a certain facet choice is used (or not used). A few examples:
Scroll only when a certain facet is in use
The following example scrolls the page to the top of the results only when the facet with name industry is in use, no matter which choice is selected:
[specificfacet-anychoice]
Scroll when a certain facet choice is selected
The following example scrolls the page to the top of the results only when the facet with the name industry has the choice consumer selected:
[specificfacet-specificchoice]
For the facet choice, make sure to use the indexed facet_value, which is displayed in the URL when this choice is selected.
Scroll when any facet choice is selected
The following example scrolls the page to the top of the results when any facet choice is selected. The code uses FWP.buildQueryString() to check if FacetWP’s query string is not empty:
[anyfacetscroll]
This will work for any facet, except the Reset facet, which empties the query string. To scroll only when a Reset facet is used, see this code example.
Note that you can also do the opposite: check for an empty FWP.buildQueryString(), which lets you scroll the page after all facet choices have been deselected manually, or all at once, when clicking a Reset facet button/link.
Scroll when any facet choice is selected on the initial page load
If you want the page to scroll only on the initial page load, and only when there are facet selections in the URL, you can use the following code. It uses a condition that checks if FWP.loaded is not (!) true, which only happens on the initial page load.
This can be useful if you want the page to scroll only after using a Submit Button, or after a redirect from a search box on another page.
[firstpageload-withfacetselections]
Scroll when a Pager facet is used
To scroll the page only when a Pager facet is used, you can use the following code:
[paginationscroll]
Scroll when a Reset facet is used
The following example scrolls the page when a Reset facet is used:
[scroll_page_on_reset]
Scroll when a Reset facet is used or when all facets are deselected
Alternatively, if you want the scroll to happen when clicking a Reset button/link, but also after manually deselecting all facets, you can check for an empty query string like this:
[scroll_page_on_emty_query_string]
Customize the scroll target
The above examples specify a point to scroll to: the top of the element with class facetwp-template, which is the element containing the results listing.
You can use any element on the page as a target, by specifying its class (.my-element) or id (#my-element) in the scrollTop option:
[customize-scroll-target]
Scroll to the top of the page
To scroll to the top of the page instead of to a specific element, use 0:
[scrolltarget-topofpage]
Customize the scroll offset
If you want to fine-tune the exact position where the scrolling ends, you can increase or decrease the target element’s offset (the coordinates relative to the document).
For example, if you have an 80px high sticky navigation bar taking up space at the top, without adjusting the scroll offset the scrolled results will disappear partly behind the sticky navigation bar. In the code example below, the scroll offset is adjusted with a value of -80, which makes the scroll end 80px above the point specified, leaving room for the navigation bar.
You can combine this code with any of the full examples above:
[scrolloffset]
Customize the scroll duration
To customize the scrolling duration (which determines the scroll speed, depending on the scroll distance), use the second parameter of the animate() function. The duration needs to be specified in milliseconds.
In the example below, the duration is set to 800 milliseconds. You can combine this code with any of the full examples above:
[scrollspeed]
Customize the scroll easing
The jQuery animate() function can have an (optional) third “easing” parameter. Easing can be described as the gradual change in speed during an animation, allowing for a smooth-looking scroll movement.
jQuery Core comes with only two built-in easing types: linear and swing (the default), but if you have the jQuery UI library installed, there is a whole range of easing types you can use. There are also easing plugins and you can write custom easing functions.
[easing]