I have created a top bar with multiple categories of products. It shows the divs of the categories that are selected once you click the links at the top bar.The user can select more than one category. This is working correctly (the function is down below).
The problem is I want the window to scroll to the top of the div of the last category selected.
For example: If I select sideboards, dining tables and chairs in that order all three category divs must be showing but the window must scroll to the top of the div of the chairs category which was the last one selected. If there is only one category selected it must scroll to the top of the div of this one category selected.
Here is a fiddle with the code: http://jsfiddle.net/jtrhw59v/2/
// function to filter categories
$(function(){
var filters = $('.works-filter'); // find the filters
var works = $('.workItem'); // find the portfolio items
var showAll = $('.showAll'); // identify the "show all" button
var cFilter, cFilterData; // declare a variable to store the filter and one for the data to filter by
var filtersActive = []; // an array to store the active filters
$(".works-filter").on("click", function () { // if filters are clicked
cFilter = $(this);
cFilterData = cFilter.attr('data-filter'); // read filter value
highlightFilter();
applyFilter();
});
function highlightFilter () {
var filterClass = 'works-filter-active';
if (cFilter.hasClass(filterClass)) {
cFilter.removeClass(filterClass);
removeActiveFilter(cFilterData);
} else if (cFilter.hasClass('showAll')) {
$('.works-filter').removeClass(filterClass);
filtersActive = []; // clear the array
cFilter.addClass(filterClass);
} else {
$('.showAll').removeClass(filterClass);
cFilter.addClass(filterClass);
filtersActive.push(cFilterData);
}
}
function applyFilter() {
// go through all portfolio items and hide/show as necessary
$('.workItem').each(function(){
var i;
var classes = $(this).attr('class').split(' ');
if (cFilter.hasClass('showAll') || filtersActive.length == 0) { // makes sure we catch the array when its empty and revert to the default of showing all items
$('.workItem').addClass('show-workItem'); //show them all
} else {
$(this).removeClass('show-workItem');
for (i = 0; i < classes.length; i++) {
if (filtersActive.indexOf(classes[i]) > -1) {
$(this).addClass('show-workItem');
}
}
}
});
}
// remove deselected filters from the ActiveFilter array
function removeActiveFilter(item) {
var index = filtersActive.indexOf(item);
if (index > -1) {
filtersActive.splice(index, 1);
}
}
});
