1

現在、Isotopeを使用してすべての投稿をグリッドに表示するWordpress Webサイトがあり、投稿カテゴリのフィルタリングに使用される固定ナビゲーションがあります。

ナビゲーションアイテムがクリックされたときにページの上部にスクロールするように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 に答える