首頁  >  文章  >  web前端  >  回到頂部總結

回到頂部總結

高洛峰
高洛峰原創
2016-10-08 14:28:461494瀏覽

網站中的回到頂部功能有益於增強用戶體驗,當一個頁面很長很長時,回到頂部是必不可少的。

回到頂部按鈕,可以使用圖片,背景圖,向量字體圖標,也可以使用代碼 css 產生。這裡使用 css 產生的方法。

html:<a href="" title="回到顶部" id="toTop">
    <span id="arrow"></span></a>
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);
}

對於回到頂部的多種方法總結如下:

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;
});


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn