“回到頂部”這個交互我們經常在瀏覽網站的時候遇到,所以今天想分享一下這個交互是如何實現的
步驟:
(1)首先我們在畫布放置一個灰色矩形和一個內聯框架,矩形內填寫文字“網頁首部”
(2)新增一個內容頁面,在裏面隨意添加內容,內容的高度要高於內聯框架的高度,在這裏我隨意添加了幾個矩形
(3)點擊內聯框架鏈接到【內容頁面】
(4)放置一條水平線在y軸爲“0”的地方,並取名爲“頂部”
(5)放置一個50*50的動態面板在畫布中並取名爲“回到頂部”,然後在動態面板State1狀態中添加一個50*50的【灰色】箭頭
(6)點擊“回到頂部”並右鍵菜單選固定到瀏覽器,在出來的彈框上選擇“水平固定”爲【右】15,“垂直固定”爲【下】15
(7)爲“回到頂部”添加交互方式,點擊【鼠標點擊時】->【滾動到元件<錨鏈接>】->【頂部(水平線)】->【僅垂直滾動】->【動畫“線性”500毫秒】
(8)完成,點擊瀏覽查看效果
原型查看效果地址:https://pm84rb.axshare.com
原型RP文件下載地址:https://download.csdn.net/download/qq_27884377/10633782