回到顶部

回到顶部

效果：当滑动到一定的距离，回到顶部这个按钮显示。点击回到顶部按钮，页面返回到顶部位置，回到顶部这个按钮消失。
效果的实现：
html部分：

 <div class="con">111111111111111111111111111111111111111</div>
   <div class="toTop"  id="top1">回到顶部</div>

css部分：

 .con{
    	height:2000px;
    	width:100%;
    }
    .toTop{
       	 display: none;
         position:fixed;
         right:0;
         bottom:0;
       }

使用jq实现

	$(function(){
    		$(window).on('scroll',function(){//当用户滚动指定的元素时，会发生 scroll 事件。
    			var len=$('html').scrollTop()//获取垂直滚动条的位置。
		    	 if(len>500)
		    	 {
		              $('.toTop').show();
		    	 }
		    	 else{
		            $('.toTop').hide();
		    	 }
		    	})	
		    		})
		    	$('.toTop').on('click',function(){
		    		$('html').animate({scrollTop:0},500);
		    	})

使用原生js

    	var top1=document.getElementById('top1');
        window.function(){
        	 scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
        	if(scrollTop>300){
        		 top1.style.display="block"
        	}
        	else{
        		 top1.style.display="none"
        	}
        }
     top1.function(){
     	var timer=setInterval(function(){
     		var speed=Math.floor(-scrollTop/6);
     		if(scrollTop==0){
     			clearInterval(timer);//如果回到顶部，清除定时器。
     		}
     		document.documentElement.scrollTop=document.body.scrollTop=scrollTop+speed;
     	},300)
     }

多多指教！