zoukankan      html  css  js  c++  java
  • js scrollTop到达指定位置!

    很早之前就想分享这篇心得, 幸之今天能在这里完成, 好了, 话不多说, 进入正题 :

    方法主要利用scrolltop值做运动, 用于到达用户指定的位置(如返回顶部把参数target设置为0即可),处理了多种情况如 scrolltop > 目标值 向上运动 ,等4种情况  , 代码及用法贴上, 

    goTo = function(target){
    				var scrollT = document.body.scrollTop|| document.documentElement.scrollTop
    				if (scrollT >target) {
    					var timer = setInterval(function(){
    						var scrollT = document.body.scrollTop|| document.documentElement.scrollTop
    						var step = Math.floor(-scrollT/6);
    						document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
    						if(scrollT <= target){
    							document.body.scrollTop = document.documentElement.scrollTop = target;
    							clearTimeout(timer);
    						}
    					},20)
    				}else if(scrollT == 0){
    					var timer = setInterval(function(){
    						var scrollT = document.body.scrollTop|| document.documentElement.scrollTop
    						var step = Math.floor(300/3*0.7);
    						document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
    						console.log(scrollT)
    						if(scrollT >= target){
    							document.body.scrollTop = document.documentElement.scrollTop = target;
    							clearTimeout(timer);
    						}
    					},20)
    				}else if(scrollT < target){
    					var timer = setInterval(function(){
    						var scrollT = document.body.scrollTop|| document.documentElement.scrollTop
    						var step = Math.floor(scrollT/6);
    						document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
    						if(scrollT >= target){
    							document.body.scrollTop = document.documentElement.scrollTop = target;
    							clearTimeout(timer);
    						}
    					},20)
    				}else if(target == scrollT){
    					return false;
    				}
    			}
    

      用法 function(target) / / 目前唯一target(目标距离number)  ,

    on(goPs,'click',function(){ goTo(2450) }); //运动到scrolltop值为2450地位置,下面也一样, 运动到指定的位置 
    on(goJob,'click',function(){ goTo(3373) })
    on(goTel,'click',function(){ buffer.goTo(3373) })
    on(goMe,'click',function(){ buffer.goTo(1539) })
    on(goHome,'click',function(){ buffer.goTo(0) });
    on(scrollgoOne,'click',function(){ buffer.goTo(2450) });
    on(scrollgoPc,'click',function(){ buffer.goTo(2450) });
    on(scrollJob,'click',function(){ buffer.goTo(3373) });
    on(scrollMe,'click',function(){ buffer.goTo(1539) });
    on(goTop,'click',function(){ buffer.goTo(0) })
    

      

  • 相关阅读:
    Legendary Items-微软2017实习生笔试第一题
    (转载)华为离职副总裁徐家骏:年薪千万的工作感悟
    【AtCoder Regular Contest 092】C.2D Plane 2N Points【匈牙利算法】
    poj 2236【并查集】
    poj 2431 【优先队列】
    poj 3280【区间dp】
    uva 10453 【回文串区间dp】
    uva 10739【基础(区间)dp】
    poj 2385【动态规划】
    poj 2229 【完全背包dp】【递推dp】
  • 原文地址:https://www.cnblogs.com/bbyz/p/3968583.html
Copyright © 2011-2022 走看看