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