Smooth Scroll to Top After Filters Are Applied

This JavaScript snippet triggers a smooth page scroll to the top whenever filters are applied using AJAX, enhancing user experience by immediately bringing the newly filtered results into the viewport.

Specifications
Smooth Scroll to Top After Filters Are Applied
7 January, 2026
  • Plugin
    • JetSmartFilters
  • Category
    • Filters & Search
  • Programming languages
    • JavaScript
Source code

Installing Instruction

  1. Copy the provided JavaScript code snippet to your clipboard.
  2. Add the code using one of the following methods:
    1. Option A: Using a Custom Code Plugin (Recommended)
      1. Install and activate a plugin such as WPCode Lite, Code Snippets, or Simple Custom CSS and JS.
      2. Create a new JavaScript snippet.
      3. Paste only the JavaScript code, without <script> tags.
      4. Save and activate the snippet.
    2. Option B: Using a Custom Code / HTML Area
      1. Add the code in a Custom HTML widget or directly into a theme file (for example, header.php or footer.php).
      2. Keep the <script> tags when using this method.
      3. Save your changes.

Example Use Case

Use this snippet to improve user navigation on sites with filterable content by ensuring the viewport resets to the start of the filtered listings after each filter change.
Applicable scenarios:

  • Websites with AJAX-powered product or content filters.
  • E-commerce or directories with long listing pages.
  • Sites aiming to enhance UX by reducing manual scrolling.
Specifications
Smooth Scroll to Top After Filters Are Applied
7 January, 2026
  • Plugin
    • JetSmartFilters
  • Category
    • Filters & Search
  • Programming languages
    • JavaScript
Source code

Let’s build together

Have your own solution?

Came up with a great solution and want to show it to the Crocoblock community?

Request a new feature

Leave a feature request through GitHub, and our developers will consider it