خودتان امتحان کنید

مشاهده نتیجه:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> elevator.js</title>
<style type="text/css">
Body {
background-color:#ccc;
text-align:center;
}
 
p {
width:80%;
margin:auto;
padding:60px;
}

button,h1 {
color:#fff;
background:#660066;
padding:10px;
border-radius:5px;
cursor:pointer;
border:2px solid #000;
outline:none;
font-size:16px;
text-align:center;
display:block;
margin: auto;
</style>

 <script type="text/javascript" src="elevator.min.js"></script>

<script type="text/javascript">
 window.onload=function(){
  var elevator=new Elevator({
    element:document.querySelector('.elevator-button'),
    mainAudio:'music/romantic.mp3',
    endAudio:'music/ding.mp3',
    duration:4000,
  });
  }
</script>
</head>
<body>
 <h1>elevator.js  </h1>
        <p>
           elevator.js
Finally, a "back to top" button that behaves like a real elevator, by adding elevator music to quietly soothe the awkwardness that can ensue when being smoothly scrolled to the top of the screen.
        </p>

      
        <p>
          Elevator.js is a stand alone library (no jquery, or the likes) so usage is pretty straight forward. 
        </p>

        <p>
         styling of elements is up to you. Elevator.js only handles the audio management, and the scroll functionality!
        </p>

      
        <p>
             Elevator.js lives entirely within the js realm, which makes things fairly simple to use.
        </p>

         <p>
          You'll need to create a new instance of Elevator, and pass it some audio elements.
        </p>

       
        <p>
          You can also add an "element" option, clicking this element will invoke the "Scroll to top" functionality, we all love and crave.
        </p>

      
        <p>
           If you're really serious (boring), you don't have to use audio... and can also set a fixed time to scroll to the top
        </p>

        
        <p>
            Down down down
        </p>

        
        <p>
           Down down down
        </p>

       
        <p>
           Down down down
        </p>

        
        <p>
         Down down down
        </p>

     
        <p>
            Down down down 
        </p>
		
		
        <p>
            Down down down
        </p>
		
        <p>
         Down down down
        </p>
		
        <p>
         Ok, here we are... click that elevator!.
        </p>
<button class="elevator-button">back to up</button>
</body>
</html>
خودتان امتحان کنید Beyamooz.com
کد بالا را ویرایش کنید و برای مشاهده نتیجه روی دکمه "ویرایش کردن" کلیک کنید.