Добавьте ScrollTo с навигацией, используя изотопную фильтрацию данных

В настоящее время у меня есть веб-сайт 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>

Вся помощь будет принята с благодарностью. Спасибо!


wordpress scrollto jquery-isotope
person R-G    schedule 19.08.2012    source источник
comment
Трудно понять без онлайн-песочницы или jsfiddle — зачем вам, например, $('html, body').animate({scrollTop:0}, 'slow'); при фильтрации с помощью кнопок вверху страницы? Или ваши кнопки навигации внизу страницы? Некоторое наглядное изображение того, что у вас есть или чего вы хотите, было бы очень полезно...   -  person Systembolaget    schedule 19.08.2012
comment
Проблема, с которой я сталкиваюсь, заключается в том, что когда зритель некоторое время прокручивает страницу вниз, а затем нажимает «Фильм» (например) в навигации — весь контент исчезает, кроме «Фильма», который автоматически отображается вверху. Поскольку отфильтрованный контент идет прямо вверх, зритель остается смотреть на пустой экран, поскольку он находится на полпути вниз по странице. Мне нужно каким-то образом реализовать ScrollTo, чтобы при нажатии на навигацию он фильтровал содержимое, а также прокручивал назад к началу страницы. Как я могу это сделать? Спасибо за вашу помощь!   -  person R-G    schedule 19.08.2012
comment
Пожалуйста, дайте мне знать, если вы понимаете, что я имею в виду, глядя на URL + исходный код. Спасибо!   -  person R-G    schedule 19.08.2012

Ответы (1)


arrow_upward
1
arrow_downward

Ладно, видишь, значит веришь :) проще понять, чего ты хочешь. По сути, все, что вам нужно сделать, это подключить то, что я прокомментировал ранее, к вашим ссылкам Editorial, Covers, Advertising, Film. Поскольку вы используете 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
person Systembolaget    schedule 19.08.2012
comment
Фантастический! Это идеально. Большое вам спасибо за вашу помощь! - person R-G; 19.08.2012
comment
Рад слышать. В этом случае не забудьте отметить ответ как правильный. - person Systembolaget; 19.08.2012