經常會在網頁中看到返回頂部的功能，但是大多數都是採用簡單的錨點直接定位到頂部，對使用者來說顯得太突兀，平緩過渡應該是一種比較好的使用者體驗。
但是從效能上來講，直接定位到頂部毋須使用指令碼，效能更高。
這個簡單的測試例子效果如下：
定位到錨點
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
返回頂部
實現指令碼如下：
1function
rt()
13})();
14 }
var mode = document.compatmode == 'css1compat' ? 'documentelement' : 'body';
通過判斷compatmode來確定瀏覽器是處於標準模式還是怪異模式(ie)，但是chrome瀏覽器在處理時稍有不同。
chrome瀏覽器下，document.documentelement.scrolltop 和 document.documentelement.scrollleft 都為0，取不到正確的資料，而用document.body.scrolltop
和dcoument.body.scrollleft則返回正確的資料。不知道在這一點上chrome為什麼脫離了標準。因此在上面**的第5行使用
top = dd.scrolltop || db.scrolltop
來取得相應的scrolltop值，對於chrome瀏覽器，取到的是db.scrolltop的值，這樣就保證了該功能在幾個主瀏覽器上可以正確執行。**的後半部分通過間歇呼叫不斷減少
這個例子到此還沒有結束，可以擴充套件一下。對於返回頂部的功能，可能會很自然地聯想到錨點的功能，在傳統的錨點實現上，使用者體驗也是不太好的，如果定位到一堆
比較密集的文字中，住住比較耗費眼力。css3考慮到了這一點，給元素加入了乙個:target偽類，比如點選上面例子中的「定位到錨點」，匹配的地方會以綠色的背景標識，
看起來醒目。樣式**如下：
p:target
老式瀏覽器是不支援這個偽類的，不能用這種效果。
最後總結一下，通過這個例子學習了以下知識點：
1.chrome瀏覽器中scrolltop的特殊性；
2.css3中:target偽類的使用；
3.只要宣告了，瀏覽器不會進入怪異模式，包括ie6，以前一直以為需要宣告xhtml1.0才行，可以通過瀏覽器返回documentelement或body來確認。
以上是個人的一些心得，希望園友們提出寶貴意見，多多指正。
實現乙個返回頂部效果的介面
返回頂部 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內容 標題一的內...
用js實現簡單的點選返回頂部效果
當頁面特別長的時候，使用者想回到頁面頂部，必須得滾動好幾次滾動鍵才能回到頂部，如果在頁面右下角有個 返回頂部 的按鈕，使用者點選一下，就可以回到頂部，對於使用者來說，是乙個比較好的體驗。實現原理 當頁面載入的時候，把元素定位到頁面的右下角，當頁面滾動時，元素一直位於右下角，當使用者點選的時候，頁面回...
乙個簡單的提示效果
乙個簡單的效果，修改了三次才能達到如意的效果。看來，細節真的是決定成敗。春江潮水連海平 div class l id c0 a href 收藏a a href 刪除a div div div class b id b1 onmouseover c 1 春江潮水連海平 div class l id c...