如何調整頁面滾動到中心點擊旋轉木馬？

Question

我試圖獲得它，以便當您點擊旋轉木馬時，頁面將調整爲在中心有旋轉木馬。這個網站（http://studionewwork.com/）顯示了這一點，當你點擊他們的旋轉木馬。我仍然在學習Jquery，所以我還沒有熟練掌握命令。

http://jsfiddle.net/8bJUc/614/

$(document).ready(function() { 
    $("#owl-demo").owlCarousel({ 
     navigation: true, 
     pagination: true, 
     lazyLoad: true 
    }); 
}); 


$('.owl-demo').on('click', function(e) { 
    var el = $(e.target.getAttribute('href')); 
    var elOffset = el.offset().top; 
    var elHeight = el.height(); 
    var windowHeight = $(window).height(); 
    var offset; 

    if (elHeight < windowHeight) { 
    offset = elOffset - ((windowHeight/2) - (elHeight/2)); 
    } 
    else { 
    offset = elOffset; 
    } 
    var speed = 700; 
    $('html, body').animate({scrollTop:offset}, speed); 
}); 

Answer 1

嘿，我更新了小提琴，使其工作：http://jsfiddle.net/8bJUc/649/

基本上你正在使用$(".owl-demo")，就好像它是一個類，但它是一個ID。然後，onClick函數嘗試獲取點擊元素，但是沒有這樣做。

var el = $(e.target.getAttribute('href'));

此行基本上說：

獲取從點擊的元素中的href屬性和使用jQuery來定位匹配的href屬性的任何元素。我刪除了這個，因爲你沒有在任何地方指定href屬性。

$('.owl-carousel').on('click', function(e) { 

    var el = $(".lazyOwl", this); 
    var elOffset = el.offset().top; 
    var elHeight = el.height(); 
    var windowHeight = $(window).height(); 
    var offset; 

    if (elHeight < windowHeight) { 
    offset = elOffset - ((windowHeight/2) - (elHeight/2)); 
    } 
    else { 
    offset = elOffset; 
    } 
    var speed = 700; 
    $('html, body').animate({scrollTop:offset}, speed); 
}); 

請注意，您發佈的示例輪播無法按預期在我的Macbook Air 11上運行。無論何時點擊它，轉盤都會跳轉。