自動滾動到可滾動的div元素

Question

我有5個元素在比屏幕更大的div（在手機上）。

我希望用戶能夠點擊其中一個元素並讓該元素滾動到屏幕的中心。

我試過用jQuery自己寫這個，但我似乎無法得到邏輯很正確。我有一種移動，但選擇的元素不會到屏幕的中心。

這裏是我有什麼做的遠小提琴：http://jsfiddle.net/geQ64/1/

下面是來自小提琴也是JS：

$(window).on('load', function() { 

    $('.tab-3').trigger('click'); 

    var width = $(window).width(); 
    if (width < 651) { 

     $('.ul-wrap').scrollLeft($('.tab-3').offset().left); 
    }  

}); 



$('.single-tabs').on('click', function() { 

    var offset = $('.tabs').width(); 
    offset = offset/5; 
    var center = offset/2; 

    var tab = $(this).data('tab'); 
    $('.tabs-content').hide(); 
    $('.tab'+ tab +'').show(); 

    var width = $(window).width(); 
    if (width > 650) { 

     var arrow = tab*20-12; 
     $('.arrow-up').css('margin-left', '' + arrow + '%'); 

    } else { 
     tab = tab - 1; 
     var position = offset * tab - center; 
     $('.ul-wrap').scrollLeft(position); 

    } 



}); 

Answer 1

找到了解決，這裏的JS是任何人都需要它。

var position中的- 55是一個箭頭，位於頁面中心，位於我正在使用此腳本移動的元素下方。

$(window).on('load', function() { 

     $('.tab-3').trigger('click'); 

     var width = $(window).width(); 
     if (width < 651) { 

      var offset = $('.tabs').width(); 
      offset = offset/7; 
      var center = offset/2; 
      var position = offset * 2 + center - 50; 

      $('.ul-wrap').animate({ 
       scrollLeft: position 
      }, 200); 
     } 

    }); 



    $('.single-tabs').on('click', function() { 

     var offset = $('.tabs').width(); 
     offset = offset/7; 
     var center = offset/2; 

     var tab = $(this).data('tab'); 
     $('.tabs-content').hide(); 
     $('.tab'+ tab +'').show(); 

     var width = $(window).width(); 
     if (width > 650) { 

      var arrow = tab*20-12; 
      $('.arrow-up').css('margin-left', '' + arrow + '%'); 

     } else { 
      tab = tab - 1; 
      var position = offset * tab + center - 50; 
      $('.ul-wrap').animate({ 
       scrollLeft: position 
      }, 200); 

     }