當頁面中內(nèi)容過多時，我們常常會采用各種方式幫助用戶快速定位到頁面中的內(nèi)容，如提供內(nèi)容菜單、定位按鈕、懸浮的導(dǎo)航欄等等。如果你想在設(shè)計項目中呈現(xiàn)這些效果，摹客在線設(shè)計就能幫你輕松做到。

頁面整體滾動

制作頁面滾動效果，需要用到交互命令“滾動”。

首先，為頁面中的組件添加交互，把作為交互目標的組件充當錨點（即頁面滾動的目標位置），如下圖中的橙色圓圈。

在交互彈窗中，選擇命令“滾動”，還可以對滾動方式進行更詳細的設(shè)置。

• 垂直：從當前位置開始，僅在垂直方向朝目標組件滾動

• 水平：從當前位置開始，僅在垂直方向朝目標組件滾動

• 同時：從當前位置開始，同時在垂直和水平方向朝目標組件滾動

此外，你還可以設(shè)置緩動、時長效果，使動畫效果更流暢自然。

在演示時，當交互被觸發(fā)后，頁面就會根據(jù)設(shè)置滾動到作為交互目標的組件（錨點）處。

頁面局部滾動

如果你想實現(xiàn)點擊按鈕/選項后，使頁面中的局部區(qū)域滾動到目標位置，而非整個頁面進行滾動的效果，同樣可以使用“滾動”命令來做到。

1. 首先，使用面板組件制作一個滾動區(qū)。點擊查看相關(guān)教程

2. 再選定一個滾動區(qū)中的組件作為錨點，并完成相關(guān)設(shè)置即可。

另一種常見的效果是頁面整體滾動，但頁面中有一個懸浮并固定位置的導(dǎo)航菜單。對于這種效果，只需要將頁面內(nèi)容整體放在滾動區(qū)中，再將導(dǎo)航菜單放在滾動區(qū)之外即可實現(xiàn)。

體驗地址：https://www.mockplus.cn/?home=1?hmsr=w12