使用同位素数据过滤添加具有导航功能的ScrollTo

Question

目前，我有一个Wordpress网站，它使用Isotope来显示网格中的所有帖子，并且有一个用于过滤帖子类别的固定导航。

我正在尝试添加一些Javascript或Jquery，以便在单击导航项目时滚动到页面顶部-这样它就可以过滤类别并滚动到页面顶部。

我已经尝试了一段时间的不同的例子，但无法弄清楚。我希望有人能给我指出正确的方向。

目前，我的导航如下所示：

    <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>`

和当前的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>

所有的帮助都将不胜感激。谢谢!

Answer 1

好的，眼见为实:)更容易理解你想要什么。基本上，你所要做的就是把我之前在你的社论，封面，广告，电影链接上评论的东西挂起来。由于您使用Isotope进行过滤，因此您已经为您的链接分配了点击功能...

// 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