zoukankan      html  css  js  c++  java
  • zepto的返回顶部scrollTop的动画解决方法

    写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果。这里我使用的是setInterval的方法。代码详情如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>goTop</title>
    	<script src="zepto.min.js" type="text/javascript" ></script>
    	<style type="text/css" media="screen">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.goTop{
    			position: fixed;
    			bottom: 20px;
    			right: 20px;
    			 100px;
    			height: 50px;
    			border: 1px solid #ccc;
    			text-align: center;
    			line-height: 50px;
    			background: pink;
    		}
    		.hello{
    			 600px;
    			height: 2000px;
    			background: yellow;
    		}
    	</style>
    </head>
    <body>
    	<div class="goTop">返回顶部</div>
    	<div class="hello"></div>
    </body>
    <script type="text/javascript">
    
    	$(function(){
    
    		$('.goTop').click(function(){
    
    			//获取当前scrollTop的位置
    			var curScroll = $(document.body).scrollTop();
    
    			//上升的位移
    			var speed = 5;
    
    			if(curScroll>0){
    				setInterval(timer,1);
    			}
    
    		    console.log(curScroll);
    
    		    function timer(){
    
    				if(curScroll>0){
    
    					curScroll = curScroll-speed;
    					$(document.body).scrollTop(curScroll);
    					console.log(curScroll);
    
    					if(curScroll<=0){
    
    						$(document.body).scrollTop(0);
    						clearInterval(timer);
    						console.log("清除计时器")
    
    					}
    				}
    
    			}
    
    		})
    
    
    	})
    </script>
    </html>
    

      

  • 相关阅读:
    [AX]AX2012开发新特性outer join中使用QueryFilter
    [AX]AX2012开发新特性表继承
    docker环境安装
    poj 3469
    poj 1187
    poj 1159
    poj 2135
    poj 1273
    poj 1458
    poj 1141
  • 原文地址:https://www.cnblogs.com/xuyan1/p/6928849.html
Copyright © 2011-2022 走看看