jQuery當前位置和滾動位置之間的區別

Question

我試圖從滾動後的頂部和它的下一個位置獲取元素的當前距離。事實上，我試圖根據距離選擇動畫持續時間。我寫了下面的代碼，但它不能正常工作 -

我有菜單項，當我點擊每一個，窗口滾動到其位置。但問題是，當我點擊最後一個項目，它應該移動3000px在2秒，我想通過獲得距離來增加時間。不幸的是，當我添加if - else if部分的一些項目不起作用。我的意思是點擊它們後沒有發生任何事。

var w = window.innerWidth 
|| document.documentElement.clientWidth 
|| document.body.clientWidth; 

var h = window.innerHeight 
|| document.documentElement.clientHeight 
|| document.body.clientHeight; 


var scrolingMenuTime=1500; 
var hashTagActive = ""; 
    $(".item, .item-f").click(function (ev) { 
     if(hashTagActive != this.hash) { 
      ev.preventDefault(); 
      var next = 0; 
      if ($(this.hash).offset().top > $(document).height() - $(window).height()) { 
       next = $(document).height() - $(window).height(); 
      } else { 
       next = $(this.hash).offset().top; 
      } 
      var currentPosition=$(this).offset().top; 
      var diffPos=Math.abs(next-currentPosition); 

     if (diffPos >= h && diffPos < 2*h){ 
      scrolingMenuTime=1700; 
     }else if(diffPos >= 2*h && diffPos < 3*h){ 
      scrolingMenuTime=2500; 
     }else if(diffPost >= 3*h && diffPos < 4*h){ 
      scrolingMenuTime=3500; 
     }else if(diffPos >= 4*h && diffPos < 5*h){ 
      scrolingMenuTime=4500; 
     }else if(diffPos >= 5*h){ 
      scrolingMenuTime=5500;} 
     else{ 
       return false; 
      } 
     $('html,body').animate({ 
      scrollTop: next 
     }, scrolingMenuTime, 'easeOutBack'); 
     hashTagActive = this.hash; 
     location.hash = ''; 
    } 
}); 

而且也是我要告訴，當我刪除if - else if部分然後代碼工作正常。 if - else if部分有什麼問題？

Answer 1

你基本上需要有某種因素將其值乘以一定的垂直值，即：具有大約3000px文檔高度的6個鏈接意味着您需要使其與當前位置和目標之間的距離更遠位置越遠，這個因素就越是具有較長距離的動畫週期。

如在此JS Fiddle

我的解決辦法，如果你是在「兩節」與激活，如果你點擊鏈接點（）（）針對「三節」，動畫持續時間將爲Math.abs(2 - 3) * 250所以滾動將持續爲250ms。

而如果你是在「兩節」（），並點擊鏈接（）滾動頁面爲「第五部分」，該公式將是Math.abs(2 - 5) * 250導致一個750ms動畫持續時間。

該解決方案實現了自動化，代碼更少，與您需要爲每個新節添加新條件的if-else if語句不同。即使你的部分高度差異很大，你也可以用javascript獲得每個部分的高度，並編寫你自己的類似公式。

JS：

// initializing 
 
var prevLinkId = 0, 
 
    body = $('html, body'); 
 

 
/* some code */ 
 

 
// get the numeric part of the linkId of the anchor that just been clicked 
 
// remove the active .highlight class name from all links 
 
// and assign it to the just clicked link 
 
linkId = $(this).attr('id'); 
 
linkId = linkId.replace('lnk', ''); 
 
links.removeClass('highlight'); 
 
$(links[linkId]).addClass('highlight'); 
 

 
// compute the absolute differet between the previous link value and the new one 
 
// to have a variable factor when multiplied by the step "here 250ms" we get 
 
// longer durations for larger distances, then we perform the scrolling 
 
// below is the part responsible for making flexible durations 
 
diff = Math.abs(linkId - prevLinkId); 
 
timeDelay = diff * 250; 
 
distance = index * secHeight; 
 
body.animate({scrollTop: distance} , timeDelay); 
 

 
//finally set the just clicked link as previous link for future calculations 
 
prevLinkId = linkId;