回到頂部總結

回到頂部總結網站中的回到頂部功能有益於增強使用者體驗，當一個頁面很長很長時，回到頂部是必不可少的。回到頂部按鈕，可以使用圖片，背景圖，向量字型表徵圖，也可以使用代碼 css 產生。這裡使用 css 產生的方法。html:   css:#toTop {   display: none;   position: fixed; /* 固定定位 */   right: 10px;   bottom: 30px;   background-color: #e6e6e6;   height: 40px;   line-height: 40px;   width: 40px;   transition: all .4s ease .1s;}#toTop:hover { background-color: #b7b7b7; }#toTop span {   position: relative; /* 相對定位，以便其虛擬元素絕對位置 */   top: 5px;   left: 15px; /* 變換為順時針旋轉 30°，通過數學角度計算後適當調整位置 */   display: inline-block;   width: 3px;   height: 20px;   background-color: #fff;   border-radius: 3px;   -webkit-transform: rotate(30deg);       -ms-transform: rotate(30deg);           transform: rotate(30deg);}#toTop span:after {   content: "";   position: absolute; /* 虛擬元素中是相對於 #toTop span 絕對位置 */   top: -5px;   left: 8px;   display: inline-block;   width: 3px;   height: 20px;   background-color: #fff;   border-radius: 3px;   -webkit-transform: rotate(-60deg);       -ms-transform: rotate(-60deg);           transform: rotate(-60deg);}使用 css 代碼產生的回到頂部按鈕如下： 對於回到頂部的多種方法總結如下：1. 錨標記# 包含了一個位置資訊，預設的錨是 #top 也就是網頁的頂端。方法：1. 對回到頂部的按鈕使用錨標記，即 a 標籤，回到頂部2. 在頁面的頂部放置定位目標，，這裡的 name 屬性和 id 屬性的值比第一步驟中的 href 屬性的值少一個 #，name 和 id 選擇一個即可。缺點：會在地址欄裡多出 # 符號。2. JavaScript Scroll 事件:返回頂部scroll(0, 0) 中第一個參數是相對於螢幕的水平位置，第二個參數是相對於螢幕的垂直位置。可調整其中任意一個值。3. animate 緩慢回到頂部：js:$(window).scroll(function () {    if($(window).scrollTop()>=100) {       $("#toTop").fadeIn(400); /* 當滑動到不小於 100px 時，回到頂部表徵圖顯示 */   }else {       $("#toTop").fadeOut(400); /* 當滑動到小於(頁面被捲去的高度) 100px 時，回到頂部表徵圖隱藏 */   }});$("#toTop").click(function () {    $("html, body").animate({scrollTop: 0}, 100); /* 期間為 100ms */    return false;});

