頁面在排序項目時移動到屏幕頂部

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