使用帶有另一個ahref函數的動畫滾動

我已經在我的網頁底部實現了此腳本，以便當有人點擊導航中的鏈接導致頁面的某個錨點部分時獲得很好的慢動畫效果。使用帶有另一個ahref函數的動畫滾動

<script type="text/javascript"> 
$('a').click(function(){ 
$('html, body').animate({ 
    scrollTop: $($(this).attr('href')).offset().top 
}, 1500); 
return false; 
}); 
</script>

但是，我也有畫廊，使用數據過濾器安排在同一頁上的幾個圖像。

<li class="active"><a href="#" data-filter="*">All</a></li> 
<li><a href="#" data-filter=".artwork">Artwork</a></li> 
<li><a href="#" data-filter=".photography">Photography</a></li>

的問題是，庫站上的點擊，當我執行的JavaScript滾動動畫代碼安排的圖像。

我已經嘗試更改HTML，身體成頭，因爲這是導航所在的div的ID。此外，我嘗試使用導航所在的div類名稱而不是html，body $（'html，body'）。animate

有什麼辦法讓這兩個函數都有效嗎？我可以以某種方式限制JavaScript使用動畫滾動到頁面的這一部分。因此，要啓動動畫滾動僅在該頁面的一部分，所以該庫也可以工作：

<div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active nav-item"><a href="#services">Services</a></li> 
        <li class="nav-item"><a href="#projects">Projects</a></li> 
        <li class="nav-item"><a href="#team" rel="" id="anchor1" class="anchorLink">Team</a></li> 
        <li class="nav-item"><a href="#contact1" rel="" id="anchor1" class="anchorLink">Contact</a></li> 
       </ul><!--//nav--> 
      </div>

來源

2016-01-21 user2080812

你應該滾動單擊處理程序只分配到要使用觸發滾動功能，在a標籤選擇器.nav-item a。這會阻止您的data-filter鏈接觸發滾動。

$('.nav-item a').click(function(e){ 
    e.preventDefault(); // do this instead of return false (note the e param) 
    $('html, body').animate({ 
    scrollTop: $($(this).attr('href')).offset().top 
    }, 1500); 
});

一般其他說明：

您正在使用的ID anchor1多個元素。一個給定的id應該只在整個頁面上出現一次。另一方面，類名可以多次使用。
將事件參數傳遞到您的點擊處理程序中，以防止a標籤觸發其默認處理程序。（請用return false;代替return false;查看上述代碼中的註釋。）

來源

2016-01-21 23:49:39 csum

非常感謝！ – user2080812

使用帶有另一個ahref函數的動畫滾動

回答

相關問題