jsに基づいてボタンを押してトップに戻ります.

7411 ワード

初学の先端は記録に使います.
  • 下にスライドページ200が表示され、「上に戻る」ボタンが表示されます.そうでないと、「上に戻る」ボタン
  • が非表示になります.
  • 「上に戻る」ボタンを押すと、ページが0
  • に戻ります.
    //            
    function getScroll(){
    	return {
    		top: window.pageYoffset||
    		document.documentElement.scrollTop||document.body.scrollTop,
    		
    		left: window.pageXoffset||document.documentElement.scrollLeft
    		||document.body.scrollLeft
    	}
    }
    
    //     
    var btn = document.getElementById("btn");
    //      
    var timer = null;
    //      ,        
    var isTop = true;
    
    window.onload = function(){
    	//         
    	window.onscroll = function(){
    		//          
    		var scrollTop = getScroll().top;
    		//        200    ,      
    		btn.style.display = scrollTop >= 200?"block":"none";
    		//       ,      ,     
    		if(!isTop){
    			clearInterval(timer);
    		}
    		// isTop = false,       
    		isTop = false;
    	}
    }
    //         
    btn.onclick = function(){
    	//      
    	timer = setInterval(function(){
    		//                200
    		var scrollTop = getScroll().top;
    		//       speed = -200 / 6;
    		var speed = Math.floor( -scrolltop / 6);
    		//       = 200+(-200/6);
    		document.body.scrollTop=document.documentElement.scrollTop=scrollTop+speed;
    		//            
    		isTop = true;
    		//       = 0      
    		if(scrollTop == 0){
    			clearInterval(timer);
    		}
    	},20);	
    }