js实现点击回到顶部

 

 效果实现

    1.滚动条离顶部一定距离后，楼梯出现，否则隐藏  （这里要判断滚动条到顶部的高度）
    2.点击楼梯按钮，自动出现相对应得页面。
    3.拖拽滚动条，页面上的商品刚好和楼梯按钮对应上。
    4.点击回到顶部

1. css代码

*{
				margin: 0;
				padding: 0;
			}
			#warp{
				width: 800px;
				margin: 0 auto;
			}
			.box{
				width: 100%;
				height: 700px;
				background: red;
				color: #fff;
				text-align: center;
				font-size: 100px;
				border: 3px solid yellow;
			}
			ul{
				list-style: none;
				position: fixed;
				top:100px;
				left:100px;
				width: 60px;
				transform: scale(0);
				transition: 1s;
			}
			li{
				width: 100%;
				height: 60px;
				border: 1px solid red;
				color: green;
				font-size: 15px;
				text-align: center;
				line-height: 60px;
				background: #ccc;
			}
			li:hover{
				background: yellow;
			}

 2.html代码

<div id="warp">
			<div class="box">进口零食</div>
			<div class="box">进口酒</div>
			<div class="box">帽子</div>
			<div class="box">鞋子</div>
			<div class="box">衣服</div>
			<div class="box">家电</div>
			<div class="box">手机</div>
			<div class="box">电子</div>
			<div class="box">居家</div>
			<div class="box">家用</div>
		</div>
		<ul>
			<li>进口零食</li>
			<li>进口酒</li>
			<li>帽子</li>
			<li>鞋子</li>
			<li>衣服</li>
			<li>家电</li>
			<li>手机</li>
			<li>电子</li>
			<li>居家</li>
			<li>家用</li>
			<li>回到顶部</li>
		</ul>

3.js代码

var oul=document.getElementsByTagName('ul')[0]
		var oli=document.getElementsByTagName('li')
		var obox=document.getElementsByClassName('box')
		window.onscroll=function(){
		//1.滑动滚动条，出现楼梯
		 var h=document.body.scrollTop||document.documentElement.scrollTop
		 if(h>400){
		 	oul.style.transform="scale(1)"
		 }else{
		 	oul.style.transform="scale(0)"
		 }
		//2.点击最后一个按钮，回到顶部
		oli[oli.length-1].onclick=function(){
				timer=setInterval(function(){
					h-=50;//h=h-50;
					if(h<=0){
						clearInterval(timer)
					}else{
						document.documentElement.scrollTop=document.body.scrollTop=h;
					}
				},10)
			}
	//3.跳到对应楼层
		for (var i=0;i<oli.length-1;i++) {
			oli[i].index=i;
		 oli[i].onclick=function(){
		 ///	console.log(this.index)
		document.documentElement.scrollTop=document.body.scrollTop=this.index*700;
		 }
	}
	//4.
	for(var j=0; j<obox.length;j++){
				//oli[j]会得到某个li赋值给m
				//offsetTop得到某个元素到浏览器顶部的距离
				if(h>=obox[j].offsetTop-300){
					//循环所有的li
					for(var k=0; k<oli.length; k++){
						if(oli[j]==oli[k]){
							oli[k].style.background='yellow';
						}else{
							oli[k].style.background='';
						}
					}
				}
			}
			
		
	}