今天給大家分享一個axure案例，錨點滾動效果，看到名字，大家可能覺得有些陌生，相信這個效果大家并不陌生，在許多html5的網(wǎng)站都有用到，下面直接上示例原型下載地址。

下載地址

http://pan.baidu.com/s/1o6kjpxS

實現(xiàn)目標

點擊導航條不同的菜單，頁面跳到菜單相應的位置，實現(xiàn)頁面自動滾動。

實現(xiàn)步驟

1.? 拖入編輯區(qū)3個矩形，并相應命名為菜單1，菜單2 ，菜單3，每個矩形都單擊右鍵—轉換—轉換為動態(tài)面板；

2.雙擊其中一個動態(tài)面板設置標簽為“菜單1”（可隨便命名），點擊+號，添加狀態(tài)，并將其命名為nomal,click,hover分別表示正常，點擊，鼠標移動的狀態(tài)，其他的菜單動態(tài)面板相應的編輯；

3.拖入編輯區(qū)4個矩形，并相應命名為菜單1，菜單2 ，菜單3代表所在板塊，在用一個大矩形包含，代表整個頁面內容，大矩形單擊右鍵—轉換—轉換為動態(tài)面板；

4.雙擊動態(tài)面板設置標簽為“頁面”（可隨便命名），狀態(tài)命名改為正常；將動態(tài)面板“頁面”再轉成動態(tài)面板“內容”；

5.單擊動態(tài)面板“內容”，設置屬性中的滾動欄改為按需顯示縱向滾動條，樣式的高度改成300；

6.設置三個菜單不同狀態(tài)的樣式，包括：nomal,click,hover，以菜單1為例；

7.設置菜單時間，單擊時，鼠標移入，鼠標移出；

菜單1鼠標單擊時：

菜單1鼠標移入時：

菜單1鼠標移出時：

菜單2，菜單3與菜單1一樣，但是鼠標單擊時還需要加上頁面上移的動作，上移多少根據(jù)菜單2板塊的高度定，比如例子中就是上移300，而且選擇絕對位置:

效果出來了：

你的效果出來了嗎？好啦，今天的分享結束了。謝謝大家！

本文為人人都是產(chǎn)品經(jīng)理團隊@小涵 原創(chuàng)，轉載請注明來源并保留本文鏈接。