很久没用jq开发前端了,最近新入职一家公司是前后端不分离,项目主要是用了JQ开发,做了个点击控制滚动条的方法。结果蒙圈了一波,思考了许久,终于知道原因在哪,话不多说,直接给大家说解决方案。
不生效源代码是这样的:
html,
body,
.page {
padding: 0;
margin: 0;
}
// 处理楼层滚动
var page = $('body > .page'),
floorTabs = $('.floor-tabs .tab-item')
floorTabs.map(function(index, item) {
$(this).on('click', function() {
page.scrollTop(100);
var scroll = page.scrollTop();
var h = productGroup.eq(index).offset().top;
var scrollTop = scroll + h;
page.animate({
scrollTop: scrollTop
}, 300);
});
});
原因1:主体body样式缺失。
解决方案:将样式改为如下代码的话,上边点击事件是可以实现的。
html,
body,
.page {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: auto;
}
原因2: scrollTop找不到滚动的body。
解决方案:在不改动样式的前提下,可以将方法改成如下也可以实现的。
$('body,html').animate({
scrollTop: scrollTop
}, 300);