Web Widget - Make an animation's back top button

back top是很常見的小功能，通常我們會製作一個link來點擊它，以便回到頁首或特定的

地方。而現在我們是要製作成當我們下拉捲軸時會出現一個image，來提醒我們可以點

擊他回到頁首，同時有帶點動畫的滑動效果，而不是一下跳到目的地。


方法一：自行製作back top function

透過JavaScript setInterval的控制，在特定的毫秒內逐一地遞減值，達到慢速上移的效果。

首先就是利用HTML呈現一個back top image：
  1. <img id="backtop" border="0" title="back top" align="right"
  2. onmouseover="changeOpacity(false)" src="images/Top.png" 
  3. onmouseout="changeOpacity(true)" onclick="returnTop()" />

CSS基本定義出它的位置與特性 
  1. #backtop{
  2.     position:fixed;
  3.     bottom:0px;
  4.     right:5px;
  5.     cursor:pointer
  6. }

再來就是撰寫JavaScript的語法，由於我們要控制back top image的透明度，當我們沒觸發

mouseover event時，透明度設為0.5，因此在網頁載入後設定及相關的function，如下：

opa_timer主要是當滑鼠移入image時，達到漸漸地回復非透明的效果

  1. var curr_opa = 0.5;
  2. window.onload = function(){
  3.     document.getElementById("backtop").style.opacity = curr_opa;
  4. }
  6. function changeOpacity(opa){
  7.     if(opa){
  8.         document.getElementById("backtop").style.opacity = 0.5;
  9.         curr_opa = 0.5;
  10.     }else{
  11.         opa_timer = setInterval(function(){
  12.             curr_opa = +(curr_opa + 0.1).toFixed(1);
  13.             if(curr_opa == 1){
  14.                 clearInterval(opa_timer);
  15.             }
  16.             document.getElementById("backtop").style.opacity = curr_opa;
  17.         } , 10);
  18.     }
  19. }

再來就是當scroll往下移時的事件及點選button時回到頁面頂端的處理：
  1. var scroll_timer;
  2. window.onscroll = function(e){
  3.     if(document.body.scrollTop > 0){
  4.         document.getElementById("backtop").style.display = "block";
  5.     }
  6.     if(document.body.scrollTop == 0){
  7.         document.getElementById("backtop").style.display = "none";
  8.     }
  9. }
  10. function returnTop(){
  11.     scroll_timer = setInterval("animateTop()", 15);
  12. }
  13. function animateTop(){
  14.     document.body.scrollTop = document.body.scrollTop - 100;
  15.     if(document.body.scrollTop == 0 || document.body.scrollTop < 0){
  16.         document.body.scrollTop = 0;
  17.         clearInterval(scroll_timer);
  18.     }
  19. }

當點選back top image就會執行returnTop function，設定每15毫秒進行一次scrollTop - 100

往上的位移。

基本上，語法使用都很簡單，關於移動的順暢度可以自行調整，調整出你覺得滿意的情況!

方法二：利用jQuery animation

 再來是利用jQuery來製作back top特效，在動畫處理的code上面會精簡不少。

HTML code修改如下：

  1. <body>
  2. <a id="home"></a>
  3. ....
  4. ....
  5. <a href="#home">
  6. <img align="right" border="0" id="backtop" onmouseout="changeOpacity(true)" onmouseover="changeOpacity(false)" src="images/Top.png" title="back top" />
  7. </a>
  8. </body>

在這邊會多定義一個標籤即<a id="home"></a>，設id主要是配合jQuery的使用，而jQuery

控制動畫的語法如下：

  1. $(document).ready(function(){
  2.     $('a[href^="#"]').click(function(e){
  3.  e.preventDefault();
  4.  var o=$(this.hash).offset();
  5.  if(o)$('body').animate({scrollTop:o.top});
  6.     });
  7. });

針對要點擊的a標籤，有定義anchor的名稱，並且取消執行a標籤預設會做的動作，當

點擊下去後，取得此DOM(this.hash表示此DOM之location物件的anchor)的offset value，

再來看是否有被defined，若您沒有放<a id="home"></a>，那麼o即為undefined，之後就是

以body標籤為parent，來控制所有下面的animate的行為，畢竟大家都是被包在body下面

地，以此範圍再適合不過！

留言

張貼留言