//首页电梯门效果
$('#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为什么不兼容的原因?
电梯门效果是啥?
~’‘’scrollTop‘’‘这个属性可以使用么?~
可以的~汗一个,API看的还是不够哦~~~
In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated.
因为 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);
}