jQuery Quicksand with smooth scrolling
===

I am in the process of making my portfolio site (demo: http://circularchaos.com/test/). In the demo the smooth scrolling effect works perfectly until you select a filterable category. If you click on a thumbnail without selecting a category first then the smooth scrolling effect works fine. But if you click on a category and then click on a thumbnail the smooth scrolling stops and just jumps. Is there a way to rectify this?

I believe that the issue lies in the jQuery code as from what I understand a class is removed and then added at the end. I'm not sure but somehow it makes the `<a href="#thumbsnavigate">` not work.   

Here is the HTML code for a singal thumbnail:

     <ul class="portfolio-area">	
     <li class="portfolio-item2" value="1" onclick="showUser(this.value)" data-id="id-0" data-type="cat-item-2">	
    <div>
    <span class="image-block">
    <a class="image-zoom" href="#thumbsnavigate" title="Radio Burn"><img  height="175" width="175" src="images/thumbs/radio.png" alt="Radio Burn" title="Radio Burn" /></a>
    </span>

Here is the HTML code for the category filter:

    <ul class="portfolio-categ filter">
    <li class="all active"><div class ="allcategory"><a href="#"><p class="categorytext">ALL</p></a></div></li>
    <li class="cat-item-1"><div class ="allcategory"><a href="#" title="3D and Animation">        <p class="categorytext">3D</p></a></div>
    </li>
    <li class="cat-item-2"><div class ="allcategory"><a href="#" title="Graphic Design"><p   class="categorytext">GRAPHIC</p></a></div>
    </li>
    <li class="cat-item-3"><div class ="allcategory"><a href="#" title="Branding"><p class="categorytext">BRANDING</p></a></div>
    </li>
    <li class="cat-item-4"><div class ="allcategory"><a href="#" title="Coding and Development"><p class="categorytext">CODING</p></a></div>
    </li>
    </ul>

Here is the jQuery code for the smooth scrolling effect:

    $(function() {
                $('a').bind('click',function(event){
                var $anchor = $(this);
                $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
                }, 1000,'easeInOutExpo');                  
                event.preventDefault();
                });
    });

And finally here is the jQuery code for the Quicksand animation:

    if (jQuery().quicksand) {

 	// Clone applications to get a second collection
	var $data = $(".portfolio-area").clone();
	
	//NOTE: Only filter on the main portfolio page, not on the subcategory pages
	$('.portfolio-categ li').click(function(e) {
		$(".filter li").removeClass("active");	
		// Use the last category class as the category to filter by. This means  that multiple categories are not supported (yet)
		var filterClass=$(this).attr('class').split(' ').slice(-1)[0];
		
		if (filterClass == 'all') {
			var $filteredData = $data.find('.portfolio-item2');
		} else {
			var $filteredData = $data.find('.portfolio-item2[data-type=' +  filterClass + ']');
		}
		$(".portfolio-area").quicksand($filteredData, {
			duration: 600,
			adjustHeight: 'auto'
		}, function () {

				lightboxPhoto();
						});		
		$(this).addClass("active"); 			
		return false;
	});

From what I can understand the class `active` is removed but once filtered the thumbnails are still clickable which means something has taken its place but don't know what it is. My aim is to make the thumbnails scroll smoothly before and after a category is clicked.

Any help is highly appreciated.  