常用小Demo：用js/jQuery實作回到頁面頂部功能

HTML代碼：

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"main"</code><code>&gt;</code>

<code>    </code><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet debitis, dolore eveniet illo maiores nam neque nesciunt perspiciatis praesentium quaerat qui, quidem rem sequi similique sunt ullam voluptate voluptates!</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

<code>//負責容納各種按鈕，例如“回到頁面頂部”，“掃面二維碼”等等</code>

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"backContainer"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>a</code> <code>href</code><code>=</code><code>"#"</code> <code>id</code><code>=</code><code>"backTop"</code><code>&gt;&lt;/</code><code>a</code><code>&gt;</code>

CSS代碼：

<code>*{</code><code>margin</code><code>:</code><code>0</code><code>; </code><code>padding</code><code>:</code><code>0</code><code>;}</code>

<code>a{</code><code>color</code><code>:</code><code>#000</code><code>; </code><code>text-decoration</code><code>:</code><code>none</code><code>;}</code>

<code>.main{</code><code>width</code><code>:</code><code>100%</code><code>; </code><code>height</code><code>:</code><code>1500px</code><code>;}</code>

<code>.backContainer{</code><code>position</code><code>:</code><code>fixed</code><code>; </code><code>right</code><code>:</code><code>40px</code><code>; </code><code>bottom</code><code>:</code><code>40px</code><code>;}</code>

<code>#bac</code><code>kTop{</code><code>display</code><code>:</code><code>block</code><code>; </code><code>width</code><code>:</code><code>46px</code><code>; </code><code>height</code><code>:</code><code>46px</code><code>; </code><code>background</code><code>:</code><code>url</code><code>(</code><code>'images/go-top.png'</code><code>) </code><code>no-repeat</code> <code>0</code> <code>-100px</code><code>;}</code>

<code>#bac</code><code>kTop:hover{background-position-y:</code><code>-150px</code><code>;}</code>

“回到頂部”按鈕及滑鼠移入時效果截圖：

JS代碼：

<code>$(</code><code>'.backContainer'</code><code>).hide();</code>

<code>$(window).scroll(</code><code>function</code><code>(){</code>

<code>    </code><code>//當視窗相對于滾動條頂部的偏移大于150px時，顯示跳轉按鈕，否則不顯示</code>

<code>    </code><code>if</code><code>($(window).scrollTop() &gt; 150){</code>

<code>        </code><code>$(</code><code>'.backContainer'</code><code>).fadeIn(</code><code>'slow'</code><code>);</code>

<code>    </code><code>}</code><code>else</code><code>{</code>

<code>        </code><code>$(</code><code>'.backContainer'</code><code>).fadeOut(</code><code>'slow'</code><code>);</code>

<code>    </code><code>}</code>

<code>});</code>

<code>//當點選跳轉按鈕時</code>

<code>$(</code><code>'#backTop'</code><code>).click(</code><code>function</code><code>(){</code>

<code>    </code><code>$(</code><code>'html'</code><code>).animate({</code>

<code>        </code><code>scrollTop:0</code>

<code>    </code><code>},1000);</code>

<code>})</code>

scroll([[data],fn]): 

當使用者滾動指定的元素時，會發生 scroll 事件。  

scroll 事件适用于所有可滾動的元素和 window 對象（浏覽器視窗）。

$(window).scroll( function() { /* ...do something... */ } );

animate(params,[speed],[easing],[fn])

用于建立自定義動畫的函數。  這個函數的關鍵在于指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left. 

// 在一個動畫中同時應用三種類型的效果

$("#go").click(function(){   

    $("#block").animate({      

        width: "90%",     

        height: "100%",      

        fontSize: "10em",      

        borderWidth: 10   

            }, 1000 );

 });

scrollTop([val])

擷取比對元素相對滾動條頂部的偏移, 此方法對可見和隐藏元素均有效。

本文轉自   frwupeng517   51CTO部落格，原文連結:http://blog.51cto.com/dapengtalk/1872718