返回頂部（Back to Top）的跳轉(zhuǎn)鏈接是網(wǎng)頁設(shè)計(jì)中不可或缺的一個(gè)小細(xì)節(jié)。它的目的是幫助訪問者快速回到頁面頂部，免除了不斷拖動(dòng)滾動(dòng)條或者不停轉(zhuǎn)動(dòng)鼠標(biāo)滾輪的麻煩，提高了瀏覽網(wǎng)頁的效率。那么請?jiān)试S我們先來思考一個(gè)弱弱的問題：為什么要返回到頂部，而不是頁面的底部？囧！很簡單嘛，文章都是從上往下讀的?。‰y道你要從下往上倒著讀文章嗎？這當(dāng)然是一個(gè)非常重要的原因。但是還有沒有其它原因呢？我想還有另外一個(gè)很重要的原因是因?yàn)轫撁娴闹饕δ軈^(qū)是在頂部的，導(dǎo)航欄、搜索框等等都在頁面頂部。通過導(dǎo)航按鈕鏈接到別的位置，或者通過搜索關(guān)鍵字查找你需要的信息都是在瀏覽完了一張頁面之后首要干的事情。 但是通常我們在返回頂部鏈接上做的工作太少，只是簡單的在頁面底部放置上一個(gè)跳轉(zhuǎn)鏈接就完事了。這樣做的結(jié)果是當(dāng)頁面比較長的時(shí)候點(diǎn)擊跳轉(zhuǎn)鏈接時(shí)，瀏覽器會(huì)瞬間將你送回到頁面頂部，速度有時(shí)候快的讓人反應(yīng)不過來，不知道跳轉(zhuǎn)之后所處的位置在哪。 另外一個(gè)問題是返回頂部鏈接做的不夠醒目。通常來說，返回頂部鏈接都會(huì)位于頁面的右下角，或者是頁面的頁腳上。這個(gè)地方本身就不是視覺的焦點(diǎn)處，如果再將跳轉(zhuǎn)鏈接設(shè)計(jì)的不夠醒目的話，訪問者很可能在瀏覽了多次頁面之后還沒發(fā)現(xiàn)這個(gè)可以給他們提供方便的設(shè)計(jì)。 再有一個(gè)問題是位置不夠合理。假設(shè)有一篇博客日志擁有很多的評論，一般來說，訪問者閱讀評論的時(shí)候比較少，所以當(dāng)他們閱讀完日志內(nèi)容之后如果不去做評論的話會(huì)直接尋找另外的信息，這個(gè)時(shí)候返回頂部的鏈接就應(yīng)該放置于日志結(jié)束之后而不是評論內(nèi)容之后。當(dāng)然還有更好的辦法就是將跳轉(zhuǎn)鏈接隨時(shí)停留在視覺區(qū)域內(nèi)。 那么這樣看來，一個(gè)好的返回頂部鏈接的設(shè)計(jì)應(yīng)該有下面幾個(gè)特點(diǎn)： 一、平滑的從頁面底部滾動(dòng)至頂部。 二、醒目到足以吸引訪問者去點(diǎn)擊。 三、更具功能性的位置設(shè)計(jì) 那么如果創(chuàng)建一個(gè)跳轉(zhuǎn)鏈接呢？通常的做法是緊挨著body標(biāo)簽下方創(chuàng)建一個(gè)空標(biāo)簽，然后再在頁面底部創(chuàng)建一個(gè)鏈接，如下代碼所示： 但是這種方法使用了冗余的空標(biāo)簽，為了避免空標(biāo)簽的出現(xiàn)，可以直接使用body標(biāo)簽下的容器的ID來實(shí)現(xiàn)跳轉(zhuǎn)。

之后，為了讓跳轉(zhuǎn)更加平滑，拷貝此頁面中的內(nèi)容，將其保存為 smoothscroll.js文件，放到你的設(shè)計(jì)文檔中合適的位置。一般來說，在你的設(shè)計(jì)文檔中應(yīng)該有一個(gè)javascript文件夾，將所有javascript文件都放入到這個(gè)文件夾中。接下來，在你的設(shè)計(jì)代碼的和中間加入鏈接 ，表示頁面將會(huì)引用這個(gè)JavaScript 文件。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

分享文章：網(wǎng)頁的人性化設(shè)計(jì)
URL分享：http://chinadenli.net/news41/312541.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、微信公眾號(hào)、用戶體驗(yàn)、品牌網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)