javascript - jquery首页电梯门效果 chorme下有效果，ff和ie没效果。

Question

//首页电梯门效果
$('#fast-nav').find('li').on('click', function (e) {
  var $this = $(this),
  $fast_nav = $('#fast-nav');
  e.preventDefault();
  // 获取当前active项的位置
  var index = $fast_nav.find('.active').index();
  // 获取点击目标的位置
  var tar_index = $this.index();
  var id = $this.data('href'),
  height = $(id).offset().top;
  if (index > tar_index) {
    $('body').animate({
      scrollTop: height - 1
    }, 500);
  } else {
    $('body').animate({
      scrollTop: height + 1
    }, 500);
  }
});

获取点击目标的位置滚动到相应的html类。
本人新手，不知道ff和ie为什么不兼容的原因？

Answer 1

因为 IE 6+ (还是 7+? 记不清楚了…), Edge 12, Firefox 等浏览器的最外层 scrollTop 默认在 html 元素，而 IE <= 5, Edge >=13, 以及 Safari, Chrome 和其他 WebKit 内核的浏览器的最外层 scrollTop 默认在 body 元素。(当然 Edge 和 Chrome 中可以在 about:config 把最外层滚动属性改成符合 W3C 规范的 html 元素)

一个兼容性比较好的做法是

// ...
if (index > tar_index) {
    $('html,body').animate({ // browser compatibility
        scrollTop: height - 1
    }, 500);
} else {
    $('html,body').animate({
        scrollTop: height + 1
    }, 500);
}

Answer 2

~’‘’scrollTop‘’‘这个属性可以使用么？~

可以的~汗一个,API看的还是不够哦~~~

In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated.

Answer 3

电梯门效果是啥？