Snippets

Snippet: Scroll To Items on Filter

  • Updated:
Important: This snippet will only work for elements that have a built-in filter setting it will not work with the Post Cards element.

This snippet will make it so when a filter item is clicked it scrolls down to the items. This can be useful on mobile if you have a ton of filter links. As you can see by default it is only applied on screen sizes equal to or smaller than 676 pixels, simply alter the 767 value to target the desired screen width at which you want this function to take place.

add_action( 'wp_footer', function() { ?>
	
		( function( $ ) {
			'use strict';
			$( document ).on( 'ready', function() {
				if ( $( window ).width() <= 767 ) {
					var $filters = $( '.vcex-filter-links' )
					$filters.each( function() {
						var $this  = $( this );
						var $links = $this.find( 'a' );
						var $grid  = $this.next( '.vcex-isotope-grid' );
						$links.on( 'click', function() {
							$( 'html, body' ).animate( {
								scrollTop: $grid.offset().top
							}, 1000 );
						} );
					} );
				}
			} );
		} ( jQuery ) );
	
<?php } );
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top