页面在排序项目时移动到屏幕顶部

Question

我使用jQuery创建了一个可排序的投资组合。

问题是;每次我点击我的投资组合项目的过滤器，然后页面滚动到顶部。

有没有办法来防止这种情况？

可以看到这里的问题：http://alsite.com.br/flex/produtos.html

我的脚本：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var Portfolio = { 
      sort: function(items) { 
       items.show(); 
       $('#portfolio-content').find('div.portfolio-item').not(items).fadeOut(500); 
      }, 
      showAll: function(items) { 
       items.fadeIn(500); 
      }, 
      doSort: function() { 
       $('a', '#portfolio-sort').on('click', function() { 

        var $a = $(this); 
        if (!$a.is('#all')) { 

         var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content'); 

         Portfolio.sort(items); 

        } else { 

         Portfolio.showAll($('div.portfolio-item', '#portfolio-content')); 


        } 

       }); 
      } 
     }; 

     Portfolio.doSort();  

    }); 

</script> 

我的投资组合代码：

<div id="portfolio"> 
    <div id="portfolio-sort"> 
     <a href="#" id="all">TODOS</a> 
     <a href="#" data-cat="a">ACM</a> 
     <a href="#" data-cat="b">MDF</a> 
     <a href="#" data-cat="c">AÇO INOX</a> 
     <a href="#" data-cat="b">PVC ESPANDIDO</a> 
     <a href="#" data-cat="c">AÇO GALVANIZADO</a> 

    </div> 
    <div id="portfolio-content"> 
     <div class="portfolio-item" data-cat="a">A</div> 
     <div class="portfolio-item" data-cat="b">B</div> 
     <div class="portfolio-item" data-cat="c">C</div> 
     <div class="portfolio-item" data-cat="c">C</div> 
     <div class="portfolio-item" data-cat="b">B</div> 
     <div class="portfolio-item" data-cat="a">A</div> 
     <div class="portfolio-item" data-cat="a">A</div> 
     <div class="portfolio-item" data-cat="c">C</div> 
     <div class="portfolio-item" data-cat="b">B</div> 
    </div> 

</div> 

Answer 1

简单的改变：

$('a', '#portfolio-sort').on('click', function() { ... 

至：

$('a', '#portfolio-sort').on('click', function(e) { ... 

并添加：

e.preventDefault(); 

-

$('a', '#portfolio-sort').on('click', function() { 
    e.preventDefault(); 

    ... 
}); 

-

这样可以防止为纽带的作用（而带你到produtos.html#）的链接。

Answer 2

您需要阻止一个链接:)链接

$('a', '#portfolio-sort').on('click', function(e) { 
    // stop being an link! 
    e.preventDefault(); 

    var $a = $(this); 

    if (!$a.is('#all')) { 
     var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content'); 

     Portfolio.sort(items); 
    } else { 
     Portfolio.showAll($('div.portfolio-item', '#portfolio-content')); 
    } 
}); 

更多信息：click