Add ScrollTo with Navigation using Isotope datafiltering

1 Views

Currently I have a WordPress website that uses Isotope to display all posts in a grid and there is a fixed navigation that is used for filtering the post categories.

I am trying to add some Javascript or Jquery to scroll to the top of the page when a navigation item is clicked – so it filters the category and also scrolls to the top of the page.

Read More

I have been trying different examples for a while and cannot figure it out.
I was hoping someone might be able to point me in the right direction.

Currently my navigation looks like this: 

    <div class="menuContainer right">
       <ul id="options" class="option-set">
         <li><a href="#" data-filter=".1">Editorial</a></li>
         <li>&nbsp;</li>
         <li><a href="#" data-filter=".4">Covers</a></li>
         <li>&nbsp;</li>
         <li><a href="#" data-filter=".3">Advertising</a></li>
         <li>&nbsp;</li>
        <li><a href="#" data-filter=".5">Film</a></li>
       </ul>
   </div>`

and the current js. 

      <script type="text/javascript">
   jQuery(document).ready(function(){
     var mycontainer = jQuery('#isocontent');
     mycontainer.isotope({
     itemSelector: '.postContainer',
     });

   // filter items when filter link is clicked
jQuery('#options a').click(function(){
  var selector = jQuery(this).attr('data-filter');
  mycontainer.isotope({ filter: selector });
  return false;  
  });

// set selected menu items
   var $optionSets = $('.option-set'),
       $optionLinks = $optionSets.find('a');

       $optionLinks.click(function(){
          var $this = $(this);
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
          return false;
      }
   var $optionSet = $this.parents('.option-set');
   $optionSet.find('.selected').removeClass('selected');
   $this.addClass('selected'); 

});

});
 </script>

All help would be greatly appreciated.
Thank you!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Ok, seeing is believing ๐Ÿ™‚ easier to understand what you want. Basically, all you have to do is to hook up what I commented before on your Editorial, Covers, Advertising, Film links. Since you use Isotope with filtering, you have assigned click functions to your links already…

    // stuff

<ul id="filters">
    <li><a href="#" data-filter="*">Show all, home, whatever</a></li>
    <li><a href="#" data-filter=".editorial">Editorial</a></li>
    <li><a href="#" data-filter=".covers">Covers</a></li>
    <li><a href="#" data-filter=".advertising">Advertising</a></li>
    <li><a href="#" data-filter=".film">Film</a></li>
</ul>

// more stuff

$('#filters a').click(function() {
    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: selector
    });
    $('body,html').animate({ // always scrolls to the top when filter link is clicked
        scrollTop: 0
    }, 800);
    return false;
});รขย€ย‹

// even more stuff