菜單指針通過滾動動畫

Question

我做了一個頂級菜單與underneith按鈕一個小箭頭。 我想讓這個箭頭移動到我的單頁設計中的滾動位置。

我認爲我的基礎工作......但不知何故，只要我嘗試使箭頭動起來（而不是讓它在按鈕之間跳轉），它就會保持flippin的狀態。我想這與多個> =有關......但我想不出替代方案。任何人都可以請給我一些建議嗎？

的影響可以在這裏看到：http://www.lightwavedesign.nl/

我現在用的是JS如下：

function goToByScroll(id){ 
     $('html,body').animate({scrollTop: $("#"+id).offset().top-78},'1000'); 
    }; 

    window.onload = function() { 
     var link1 = $("#Welkom"); var positionLink1 = link1.position(); 
     var link2 = $("#OverMij"); var positionLink2 = link2.position(); 
     var link3 = $("#Portfolio"); var positionLink3 = link3.position(); 
     var link4 = $("#Contact"); var positionLink4 = link4.position(); 

     function getScrollTop() { 
     if (typeof window.pageYOffset !== 'undefined') {return window.pageYOffset;} 
     var d = document.documentElement; 
     if (d.clientHeight) {return d.scrollTop;} 
     return document.body.scrollTop; 
     } 

     window.onscroll = function() { 
     var box = document.getElementById('menuAanwijzer'), 
     scroll = getScrollTop(); 
     if (scroll <= positionLink2.top) {$('#menuAanwijzer').animate({left: '665px'}, 100)} 
     if (scroll >= positionLink2.top-80) {$('#menuAanwijzer').animate({left: '760px'}, 100)} 
     if (scroll >= positionLink3.top-80) {$('#menuAanwijzer').animate({left: '860px'}, 100)} 
     if (scroll >= positionLink4.top-80) {$('#menuAanwijzer').animate({left: '960px'}, 100)} 
     if (scroll >= positionLink2.top-80) {$('#menuTitel').fadeIn('500');} 
     if (scroll <= positionLink2.top-80) {$('#menuTitel').fadeOut('500');} 

     }; 
    }; 

Answer 1

簡單，明確使用.stop()
.stop（）動畫隊列動畫（）

if (scroll <= positionLink2.top) {$('#menuAanwijzer').stop().animate({left: '665px'}, 100)} 
    if (scroll >= positionLink2.top-80) {$('#menuAanwijzer').stop().animate({left: '760px'}, 100)} 
    if (scroll >= positionLink3.top-80) {$('#menuAanwijzer').stop().animate({left: '860px'}, 100)} 
    if (scroll >= positionLink4.top-80) {$('#menuAanwijzer').stop().animate({left: '960px'}, 100)} 
    if (scroll >= positionLink2.top-80) {$('#menuTitel').stop().fadeIn('500');} 
    if (scroll <= positionLink2.top-80) {$('#menuTitel').stop().fadeOut('500');}