如何在單擊按鈕時滾動到某個元素並使其懸停？

Question

可能是重複的，但我似乎無法找到正確的答案。

我有一個按鈕，當我按下它，我希望它滾動到具有「＃李-1」的ID李項目，也有它徘徊。我知道我的代碼是錯誤的，但不確定如何解決它（新的jquery）。那麼我如何才能達到預期的效果呢？

這裏有一個鏈接的jsfiddle - https://jsfiddle.net/orb1vw28/7/

在此先感謝

$(document).ready(function(){ 

    $('.button').click(function(){ 
     $('body').scrollTo('#li-1', 200); 
     $("#li-1").toggleClass("hov"); 
    }); 
}) 

Answer 1

好吧，你在你的代碼的一些問題，但我做了一些細微的變化和管理，它的工作。

的jsfiddle wans't爲我工作，所以我做了你一支筆。

http://codepen.io/filipemerker/pen/jbvxyY

的事情是，你需要傳遞一個數值爲「scrollTo」，而不是一個選擇。我只是計算了父級的scrolltop減去LI元素的scrolltop之間的差異。我還爲你添加了一個動畫。一探究竟。

$('#event-list').stop().animate({scrollTop:location}, '200', 'linear'); 

Answer 2

可以計算出正確的目標位置 - 你滾動到一個 - 用the getScrollTargetPosition() function in this gist（註釋，所以沒有必要在這裏解釋）。

基礎上和jQuery.scrollable plugin - 解決了cross-browser issues以及一堆scroll-related usability problems - ，你最終會與此代碼：

$(document).ready(function() { 
    $(".button").click(function (event) { 

     var $window = $(window), 
      $scrollContainer = $("#event-list"), 
      $target = $("#li-1"), 
      targetPosition = getScrollTargetPosition ($target, $window); 

     event.preventDefault(); 

     $scrollContainer.scrollTo(targetPosition, { 
      complete: function() { 
       $target.toggleClass("hov"); 
      } 
     }); 

    }); 
}); 

要看到它在行動，檢查出來的JSBin （result,source）。