function(){
var id = '点击的导航栏选项对应商品分类的id'
//获取所有的分类
var scrollTargets = document.querySelectorAll('div.good-item');
//获取商品列表容器当前已滚过高度
var distance = document.querySelector('div.good-list-wrapper').scrollTop;
var total = 0;//声明到达目标分类的高度
//遍历所有的分类
for(var i=0;i<scrollTargets.length;i++){
//当前分类中自定义属性保存的分类id
var myhash = scrollTargets[i].dataset.myhash
if(myhash == id){
//保存目标分类所在的高度 +++ 60是我项目中搜索栏占用的高度
total = scrollTargets[i].offsetTop-60;
}
};
var step = total / 50; //把需要滚动的高度分为50次平滑过渡
//判断目标分类是在 当前已滚过的高度之上 还是 之下
if (total > distance) {
scrollDownTarget();//下滚动处理函数
} else {
let newTotal = distance - total ;//更新需要滚动的高度
step = newTotal / 50; //新的过渡步伐
scrollUpTarget();//上滚动处理函数
};
/* 下滚动到对应的商品列表 */
function scrollDownTarget(){
//判断是否已到达目标高度,未到目标分类则每次滚动50分之1
if (distance < total) {
distance += step;
document.querySelector('.food-list-wrapper').scrollTop = distance;
setTimeout(scrollDownTarget, 10);
} else {
document.querySelector('.food-list-wrapper').scrollTop = total;
};
};
/* 上滚动到对应的商品列表 */
function scrollUpTarget(){
if (distance > total) {
distance -= step;
document.querySelector('.food-list-wrapper').scrollTop = distance;
setTimeout(scrollUpTarget, 10)
} else {
document.querySelector('.food-list-wrapper').scrollTop = distance;
};
};
};
侧导航栏平滑滚动效果
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 上一篇已经完成了导航栏效果的渐变。但是侧滑返回的时候，导航栏从不透明界面跳转到透明界面时，总是会突变，感觉很膈应。...
- 方法一 根据滚动速度显示或隐藏效果 (void)scrollViewDidScroll:(UIScrollView...
- 所说的吸顶效果就是在页面没有滑动之前，导航栏的效果如下图所示： 当页面向上滑动之后，导航栏始终固定在页面的上方。 ...
- 前言 目前市面上大部分APP使用导航栏透明的效果，并且通常下面跟随着UIScrollView或UITableVie...
