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

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

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

分享文章：網(wǎng)頁(yè)的人性化設(shè)計(jì)
URL分享：http://jinyejixie.com/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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)