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) })
    

      

  • 相关阅读:
    《RESTful Web Services》第一章 使用统一接口
    selenium测试(Java)--元素操作(五)
    selenium测试(Java)--浏览器控制(四)
    Struts2 基础典型应用
    Fitnesse 访问日志配置
    selenium定位方法(java实例)(二)
    selenium测试环境搭建(一)
    java web 学习-网络资源
    eclipse + tomcat 开发环境配置
    HTTP客户端代码片段
  • 原文地址:https://www.cnblogs.com/bbyz/p/3968583.html
Copyright © 2011-2022 走看看