Jquery動畫回到頂部

我目前正在嘗試製作一個按鈕，將用戶帶回頁面的頂部，但動畫。點擊按鈕後，使頁面回滾到頂部。我做了搜索在這裏找到this ..Jquery動畫回到頂部

我試圖使這個JSfiddle使用以下...

CSS

html { 
margin:0; 
padding:0; 
height:2000px; 
} 

body { 
height:2000px; 
} 

#blue-box { 
position:fixed; 
width:100px; 
height:70px; 
margin-left:0px; 
margin-top:50px; 
background-color:blue;  
} 

#blue-box h1{ 
font-family:Constantia; 
font-size:20px; 
text-align:center; 
margin-top:5px; 
color:#FFFFFF; 
}

HTML

<div id="blue-box"> 
<h1>Back To Top</h1> 
</div>

JavaScri PT

$(document).ready(function() { 
var away = false; 

$('#blue-box').click(function() { 
$("html, body").animate({scrollTop: 0}, 500); 
});

不幸的是，這似乎並沒有工作，我不知道我是否錯過了一些東西出來或做了什麼明顯的錯誤？

來源

2012-01-20 Flickdraw

您在腳本末尾缺少});。將它添加solves your problem：

$(document).ready(function() { 
    var away = false; 

    $('#blue-box').click(function() { 
     $("html, body").animate({scrollTop: 0}, 500); 
    }); 
}); // <-- Here.

這就是爲什麼縮進你的代碼的一個很好的例子，正確是很重要的。這使得這種錯誤更難以忽略。

來源

2012-01-20 19:31:25

衛生署！謝謝，我是JavaScript的完全新手，這會花費我一段時間才能弄清楚。 – Flickdraw

你忘了關閉的$（document）。就緒

http://jsfiddle.net/HX3ww/3/

來源

2012-01-20 19:35:01 Fresheyeball

這也是一個輕微的變化，即一旦你開始向下滾動頁面按鈕僅淡入和消失，一旦你回到在頁面頂部http://jsfiddle.net/b4M66/

的jQuery：

$(function() { 
    $(window).scroll(function() { 
     if($(this).scrollTop() != 0) { 
      $('#toTop').fadeIn();  
     } else { 
      $('#toTop').fadeOut(); 
     } 
    }); 

    $('#toTop').click(function() { 
     $('body,html').animate({scrollTop:0},800); 
    });  
});

CSS：

#toTop { position: fixed; bottom: 50px; right: 30px; width: 84px; background-color: #CCC; cursor: pointer; display: none; }

HTML：

<div id="toTop">Back to Top</div>

來源

2012-04-13 13:13:45 Frasier013

Jquery動畫回到頂部

回答

相關問題