手机端目录左右滑块并跳相应位置

参考地址

<div class="Mobel_Top_lr">
			<div class="Mobel_Top_lr_ALL">
				<div class="Mobel_Top_L">
					<img src="https://img-1252908129.file.myqcloud.com/img/Mobel_lr.png" alt="">
				</div>
				<!-- 修改宽度的话要去修改rem才能 -->
				<div class="Mobel_Top_Inr">
					<ul>
						<li class="sta" data-nub = "0">主会场</li>
						<li data-nub = "1">智慧零售</li>
						<li data-nub = "2">AI</li>
					</ul>
				</div>
				<div class="Mobel_Top_R">
					<img src="https://img-1252908129.file.myqcloud.com/img/Mobel_lr.png" alt="">
				</div>
			</div>
		</div>

$(".Mobel_Top_L").on('click',function(){
	var e = $(".Mobel_Top_Inr ul")
	  , t = e[0].scrollLeft
	  , g = e[0].scrollWidth
	  , n = e[0].offsetWidth;
	0 < t && e.animate({
		scrollLeft: Math.max(0, t - n)
	}, 200)
})
$(".Mobel_Top_R").on('click',function(){
	var e = $(".Mobel_Top_Inr ul")
	  , t = e[0].scrollLeft
	  , g = e[0].scrollWidth
	  , n = e[0].offsetWidth
	  , a = g - n;
	t < a && e.animate({
		scrollLeft: Math.min(a, t + n)
	}, 200)
})
$(".Mobel_Top_Inr li").on('click',function(){
	var num = getDataset(this).nub
	// var _VEL = $('.ConAll').[num]
	window.scrollTo(0,$('.ConAll')[num].offsetTop - 50)
	$(".Mobel_Top_Inr li").removeClass('sta')
	$(this).addClass('sta')
})
var ReadyAgen = function(){
	//获取当前滚动条高度
	var topp = $(document).scrollTop();
	//用于调试 弹出当前滚动条高度
	if(topp > 180){
		$(".Mobel_Top_lr").addClass('layout-aside-fixed')
	}else{
		$(".Mobel_Top_lr").removeClass('layout-aside-fixed')
	}
}

$(document).ready(function(){//在文档加载完毕后执行
	ReadyAgen()
	ReadyAgenTop()
})
window.addEventListener('scroll',ReadyAgen);
/**/
var ReadyAgenTop = function() {
	var scrollTop = $(window).scrollTop();//滚动条距离顶部的距离
	var e = $(".Mobel_Top_Inr ul")
	var itemTop = [];
	for(var i = 0;i< navlist.length;i++){
			 itemTop[i] = $($(".ConAll")[i]).offset().top //获取对应模块距离顶部的距离 - $(document).scrollTop();
	}
	var NowNumber
	for(i = 0;i <= navlist.length; i++){
		if(scrollTop >= itemTop[i]- 88 && itemTop[i] > 0){  //判断大小
		    NowNumber = i
			// console.log(i);
			navlist.eq(i).addClass('sta').siblings('li').removeClass('sta');
		}
	}
	var changelefts = itemLeft[NowNumber]
	e.animate({scrollLeft: changelefts-40}, 50)
}
var navlist = $('.Mobel_Top_Inr ul li'); //获取导航列表
var itemLeft = [];
for(var i = 0;i< navlist.length;i++){
		 itemLeft[i] = Math.round($($(".Mobel_Top_Inr ul li")[i]).offset().left)
}
window.addEventListener('scroll',throttle(ReadyAgenTop,50));
// 简单的节流函数
function throttle(fun, delay, time) {
    var timeout,
        startTime = new Date();
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
            // 没达到触发间隔，重新设定定时器
        } else { 
            timeout = setTimeout(function(){
                fun.apply(context, args);
            }, delay);
        } 
    };
};