浅析scrollTop方法失效的原因！！！

很久没用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);