1

目前我有一个 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>

所有帮助将不胜感激。谢谢！

4

1 回答 1

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
于 2012-08-19T12:14:05.813 回答