zoukankan      html  css  js  c++  java
  • jq-animate实现返回顶部效果

    jq-animate实现返回顶部效果:

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>jq-animate回到顶部</title>
    	<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		#wrap {
    			height: 30000px;
    		}
    		#toTop {
    			height: 50px;
    			 50px;
    			font-size: 30px;
    			line-height: 50px;
    			text-align: center;
    			position: fixed;
    			right: 10px;
    			bottom: 10px;
    		}
    	</style>
    	<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    	<div id="wrap">
    		<button id="toTop">^</button>
    	</div>
    	<script type="text/javascript">
    		$('#toTop').click(function() {
    			var top1 = $('body').scrollTop();
    			var top2 = $(document).scrollTop();//document对象不能执行animate
    			var top3 = $(window).scrollTop();//window对象不能执行animate
    			console.log(top1);
    			console.log(top2);
    			console.log(top3);
    			$('body').animate({
    				scrollTop: '0'				
    			},1000);
    		});
    	</script>
    </body>
    </html>
    

      

  • 相关阅读:
    React之JSX语法
    Visual Studio Code 使用 Typings 实现智能提示功能
    React.js 之hello word
    Linux命令详解-cd
    Linux命令详解-ls
    linux常用命令
    LINUX系统配置相关
    netsh
    Visual Studio
    乘法算术表
  • 原文地址:https://www.cnblogs.com/handsomehan/p/5896844.html
Copyright © 2011-2022 走看看