JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="bt_aboutus">bt_aboutus</button>
<div id="page_1"></div>
CSS
#page_1 { position: relative;
background-color: yellow;
border: 2px solid red;
width: 200px;
height: 200px;
margin-top: 300px; }
JavaScript
"use strict";
function getType( Obj ){
return Object.prototype.toString.call( Obj ).match( /\s([a-zA-Z]+)/ )[ 1 ].toLowerCase();
}
$( function(){ // forme abrégée de $(document).ready(function(){
var ScreenHeight = "-=200px"; // déplacement relatif de - 200px
$( "#bt_aboutus" ).one( "click", function(){ // one : une seule fois; on : plusieurs fois
$( "#page_1" ).animate( { "marginTop" : ScreenHeight } , 800, "easeInOutQuad" );
});
});
$( window ).load( function(){
});