javascript - 如何调整页面在点击轮播时滚动到中心？

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

嘿，我更新了你的 fiddle 以使其正常工作: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'' 上无法按预期工作。每当我点击它时，轮播就会跳来跳去。