在很多網(wǎng)站上都有一個“返回頂部“的按鈕。不管屏幕怎么滾動，返回頂部按鈕一直懸浮在固定位置，隨時待命。一旦你點(diǎn)擊它，他就像小火箭一樣，嗖的一下，頁面就回到頁面頂部了！那么這個效果用Axure怎么實(shí)現(xiàn)呢？以下是來自小樓老師的一篇教程，趕緊來學(xué)一下吧！
Axure動態(tài)面板的屬性中有個功能，叫“固定到瀏覽器”，這個功能也可以在動態(tài)面板的右鍵菜單中選擇。
如果我們希望頁面上的某個部分，在頁面滾動時保持在原位不動，就需要用到“固定到瀏覽器”的這個功能。
比如，一個“返回頂部“的按鈕一直固定在頁面右下方，距離瀏覽器右邊框100像素和下邊框10像素的位置上。點(diǎn)擊這個按鈕時，整個頁面滾動回頂部。這樣的效果就需要用到上面提到的功能。
其實(shí)，Axure“固定到瀏覽器“這個功能，并不是把元件在絕對位置固定，它是相對于瀏覽器的固定，對于頁面來說其實(shí)元件是在隨著頁面的滾動而反向移動，形成了一個停留在原位置的視覺效果。所以它是相對固定，相對于瀏覽器邊框的固定。
知道了原理，我們來實(shí)現(xiàn)上面說到的這個效果。
Axure案例：固定位置的返回頂部按鈕
首先，我們先完成固定按鈕位置。（圖151）
1、我們先搭建一個簡易的頁面，然后放入一個矩形，改成箭頭樣式，并“轉(zhuǎn)為動態(tài)面板“，命名為”back“。
2、點(diǎn)擊動態(tài)面板屬性中的“固定到瀏覽器“，打開設(shè)置界面；
3、勾選“固定到瀏覽器窗口“的復(fù)選框，開啟設(shè)置選項(xiàng)；
4、水平固定中選擇“右“，并設(shè)置邊距為”100“px；
5、水平固定中選擇“底部“，并設(shè)置邊距為”10“px。
（圖151）
然后，添加“返回頂部“按鈕【鼠標(biāo)單擊時】事件的用例動作；因?yàn)楫?dāng)前動態(tài)面板中只有一個元件，所以【鼠標(biāo)單擊時】的事件可以用矩形也可以用動態(tài)面板。這里我們使用動態(tài)面板的觸發(fā)事件。
如果要滾動回頂部，我們需要用一個元件在頂部進(jìn)行位置定位，滾動時滾動到這個元件的位置上。頁面中，有一個文字為“頂部導(dǎo)航“的占位符元件，它的y軸坐標(biāo)為”0“，就是在頂部的位置，我們就用它進(jìn)行頂部位置的定位。
我們?yōu)椤绊敳繉?dǎo)航“這個元件命名為”top“，并在用例編輯界面中選擇動作”滾動到元件<錨鏈接>“后，勾選這個元件。在接下來的選項(xiàng)中我們勾選”僅垂直滾動“，如果需要滾動回頂部時有動態(tài)的效果，可以繼續(xù)選擇【動畫】中的”線性“效果，時間為默認(rèn)的”500“毫秒即可。這樣就是一個500毫秒勻速滾動回頂部的效果。（圖152）
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。