Axure：如何快速“回到頂部”？

2 評論 10714 瀏覽 15 收藏 4 分鐘

今天我們來分享一個瀏覽網(wǎng)頁時經(jīng)常會遇到的一個操作，“回到頂部”。有了這個操作，瀏覽網(wǎng)頁時就非常方便了，特別是商城類的網(wǎng)站，這個操作是必不可少的了，一起來看看~

這個原型一共用到兩個頁面：“首頁”和“內(nèi)容頁面”。

第一步：首頁組件

  1. 一個矩形框，尺寸1024×120，作為網(wǎng)頁頭部，可放置logo和標題（尺寸大小不要求，自己喜歡就好）；
  2. 一個內(nèi)聯(lián)框架，尺寸1024×520，作為網(wǎng)頁主體（寬度與網(wǎng)頁頭部一致，高度不要求）。

第二步：內(nèi)容頁面組件

  1. 可以放置一些灰色方框，代表網(wǎng)頁內(nèi)容，要有錯開放置，顯示的時候有回到頂部的效果就可以了（注意：放置的內(nèi)容總高度要大于內(nèi)聯(lián)框架的高度）；
  2. 一條水平線放置在y軸為0的位置，命名為“頂部”；
  3. 一個50×50的動態(tài)面板放置在右下角，命名為“回到頂部”，動態(tài)面板state面板狀態(tài)中，放置一個50×50的箭頭，設(shè)置圖標顏色為淺灰色（icons 圖標中可找到）。

第三步：為內(nèi)聯(lián)框架添加鏈接屬性，設(shè)置內(nèi)聯(lián)框架鏈接到“頁面內(nèi)容”

雙擊內(nèi)聯(lián)框架勾選鏈接頁面，并確定。

第四步：為“回到頂部”設(shè)置固定到瀏覽器

右鍵“回到頂部”設(shè)置固定到瀏覽器，水平固定位置右邊距15，垂直固定位置下邊距15，始終保持頂部。

最后一步：為“回到頂部”添加鼠標點擊時用例

設(shè)置為垂直滾動到“頂部”，線性，500毫秒。

好啦，擁有火箭速度的回到頂部已經(jīng)完成了，快去預(yù)覽看看效果吧?。?/p>

可以先瞧瞧完成的效果https://k7ig8o.axshare.com

 

本文由 @方子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pixabay，基于 CC0 協(xié)議

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
方子
3篇作品 37158總閱讀量
09-132017 瀏覽
李佳琦直播風波的冷思考
02-027680 瀏覽
基于“福格行為模型”的用戶分層實踐
07-267242 瀏覽
【用戶增長】渠道增長SOP：輕松實現(xiàn)內(nèi)渠提效復(fù)盤分析
01-206950 瀏覽
2023年，營銷人員該如何應(yīng)對新的困境與挑戰(zhàn)？
12-201889 瀏覽
AIGC賦能下，產(chǎn)品的創(chuàng)新之路
評論
評論請登錄
  1. 目前還沒評論，等你發(fā)揮！