back top是很常見的小功能，通常我們會製作一個link來點擊它，以便回到頁首或特定的
地方。而現在我們是要製作成當我們下拉捲軸時會出現一個image，來提醒我們可以點
擊他回到頁首，同時有帶點動畫的滑動效果，而不是一下跳到目的地。
方法一：自行製作back top function
透過JavaScript setInterval的控制，在特定的毫秒內逐一地遞減值，達到慢速上移的效果。
首先就是利用HTML呈現一個back top image：
CSS基本定義出它的位置與特性
再來就是撰寫JavaScript的語法，由於我們要控制back top image的透明度，當我們沒觸發
mouseover event時，透明度設為0.5，因此在網頁載入後設定及相關的function，如下：
opa_timer主要是當滑鼠移入image時，達到漸漸地回復非透明的效果
再來就是當scroll往下移時的事件及點選button時回到頁面頂端的處理：
當點選back top image就會執行returnTop function，設定每15毫秒進行一次scrollTop - 100
往上的位移。
基本上，語法使用都很簡單，關於移動的順暢度可以自行調整，調整出你覺得滿意的情況!
方法二：利用jQuery animation
再來是利用jQuery來製作back top特效，在動畫處理的code上面會精簡不少。
HTML code修改如下：
在這邊會多定義一個標籤即<a id="home"></a>，設id主要是配合jQuery的使用，而jQuery
控制動畫的語法如下：
針對要點擊的a標籤，有定義anchor的名稱，並且取消執行a標籤預設會做的動作，當
點擊下去後，取得此DOM(this.hash表示此DOM之location物件的anchor)的offset value，
再來看是否有被defined，若您沒有放<a id="home"></a>，那麼o即為undefined，之後就是
以body標籤為parent，來控制所有下面的animate的行為，畢竟大家都是被包在body下面
地，以此範圍再適合不過！
地方。而現在我們是要製作成當我們下拉捲軸時會出現一個image，來提醒我們可以點
擊他回到頁首，同時有帶點動畫的滑動效果，而不是一下跳到目的地。
方法一：自行製作back top function
透過JavaScript setInterval的控制，在特定的毫秒內逐一地遞減值，達到慢速上移的效果。
首先就是利用HTML呈現一個back top image：
<img id="backtop" border="0" title="back top" align="right"
onmouseover="changeOpacity(false)" src="images/Top.png"
onmouseout="changeOpacity(true)" onclick="returnTop()" />CSS基本定義出它的位置與特性
#backtop{
position:fixed;
bottom:0px;
right:5px;
cursor:pointer
}
再來就是撰寫JavaScript的語法，由於我們要控制back top image的透明度，當我們沒觸發
mouseover event時，透明度設為0.5，因此在網頁載入後設定及相關的function，如下：
opa_timer主要是當滑鼠移入image時，達到漸漸地回復非透明的效果
var curr_opa = 0.5;
window.onload = function(){
document.getElementById("backtop").style.opacity = curr_opa;
}
function changeOpacity(opa){
if(opa){
document.getElementById("backtop").style.opacity = 0.5;
curr_opa = 0.5;
}else{
opa_timer = setInterval(function(){
curr_opa = +(curr_opa + 0.1).toFixed(1);
if(curr_opa == 1){
clearInterval(opa_timer);
}
document.getElementById("backtop").style.opacity = curr_opa;
} , 10);
}
}
再來就是當scroll往下移時的事件及點選button時回到頁面頂端的處理：
var scroll_timer;
window.onscroll = function(e){
if(document.body.scrollTop > 0){
document.getElementById("backtop").style.display = "block";
}
if(document.body.scrollTop == 0){
document.getElementById("backtop").style.display = "none";
}
}
function returnTop(){
scroll_timer = setInterval("animateTop()", 15);
}
function animateTop(){
document.body.scrollTop = document.body.scrollTop - 100;
if(document.body.scrollTop == 0 || document.body.scrollTop < 0){
document.body.scrollTop = 0;
clearInterval(scroll_timer);
}
}
當點選back top image就會執行returnTop function，設定每15毫秒進行一次scrollTop - 100
往上的位移。
基本上，語法使用都很簡單，關於移動的順暢度可以自行調整，調整出你覺得滿意的情況!
方法二：利用jQuery animation
再來是利用jQuery來製作back top特效，在動畫處理的code上面會精簡不少。
HTML code修改如下：
<body>
<a id="home"></a>
....
....
<a href="#home">
<img align="right" border="0" id="backtop" onmouseout="changeOpacity(true)" onmouseover="changeOpacity(false)" src="images/Top.png" title="back top" />
</a>
</body>
在這邊會多定義一個標籤即<a id="home"></a>，設id主要是配合jQuery的使用，而jQuery
控制動畫的語法如下：
$(document).ready(function(){
$('a[href^="#"]').click(function(e){
e.preventDefault();
var o=$(this.hash).offset();
if(o)$('body').animate({scrollTop:o.top});
});
});
針對要點擊的a標籤，有定義anchor的名稱，並且取消執行a標籤預設會做的動作，當
點擊下去後，取得此DOM(this.hash表示此DOM之location物件的anchor)的offset value，
再來看是否有被defined，若您沒有放<a id="home"></a>，那麼o即為undefined，之後就是
以body標籤為parent，來控制所有下面的animate的行為，畢竟大家都是被包在body下面
地，以此範圍再適合不過！
留言
張貼留言