起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程-錨點滾動效果
今天給大家分享一個axure案例，錨點滾動效果，看到名字，大家可能覺得有些陌生，相信這個效果大家并不陌生，在許多html5的網站都有用到，下面直接上示例原型下載地址。
下載地址
http://pan.baidu.com/s/1o6kjpxS
實現目標
點擊導航條不同的菜單，頁面跳到菜單相應的位置，實現頁面自動滾動。
實現步驟
1.? 拖入編輯區3個矩形，并相應命名為菜單1，菜單2 ，菜單3，每個矩形都單擊右鍵—轉換—轉換為動態面板；
2.雙擊其中一個動態面板設置標簽為“菜單1”（可隨便命名），點擊+號，添加狀態，并將其命名為nomal,click,hover分別表示正常，點擊，鼠標移動的狀態，其他的菜單動態面板相應的編輯；
3.拖入編輯區4個矩形，并相應命名為菜單1，菜單2 ，菜單3代表所在板塊，在用一個大矩形包含，代表整個頁面內容，大矩形單擊右鍵—轉換—轉換為動態面板；
4.雙擊動態面板設置標簽為“頁面”（可隨便命名），狀態命名改為正常；將動態面板“頁面”再轉成動態面板“內容”；
5.單擊動態面板“內容”，設置屬性中的滾動欄改為按需顯示縱向滾動條，樣式的高度改成300；
6.設置三個菜單不同狀態的樣式，包括：nomal,click,hover，以菜單1為例；
7.設置菜單時間，單擊時，鼠標移入，鼠標移出；
菜單1鼠標單擊時：
菜單1鼠標移入時：
菜單1鼠標移出時：
菜單2，菜單3與菜單1一樣，但是鼠標單擊時還需要加上頁面上移的動作，上移多少根據菜單2板塊的高度定，比如例子中就是上移300，而且選擇絕對位置:
效果出來了：
你的效果出來了嗎？好啦，今天的分享結束了。謝謝大家！
本文為人人都是產品經理團隊@小涵 原創，轉載請注明來源并保留本文鏈接。
個人公眾號：PM之旅
評論
瞎幾把教，誤人子弟！
演示地址失效了，最后兩步沒看明白，有沒有rp文件，發我郵箱里吧 401418363
不用動態面板不能做么
啥幾 把 玩意，浪費時間，樓主你會不會做錨點滾動效果啊，動態面板不是制作錨點滾動效果的必須步驟。
無法弄明白，作者是否可以自己照著這里的教程一模一樣做一遍，看看是否可以實現效果。呵呵噠。
第一部門的三個矩形沒必要用動態面板來做，直接設置交互樣式就好了 ? 搞復雜了
另外第4步中，將矩形設置為動態面板“頁面”后再次轉為動態面板“內容”的意義是什么？第6步中的單擊動態面板“頁面”應該是單擊動態面板“內容”吧？
支持一下。另外，建議結合選擇組和交互樣式實現nomal,click,hover，避免使用復雜的交互邏輯。
啊弄明白了。
按照步驟做了，但是不能逆向是為什么呢？
第6步說的太不清楚了，初學的我看不懂，實在看不懂，軟件上也找不到，麻煩下回寫的時候照顧一下初學者，步驟再細致些，我現在翻看了N遍還是搞不懂啊，急死了！
屬性在哪找，沒有那個框框
動態面板看暈了@_@，然后用熱點實現了 ??
按照步驟做了，順著可移動但是不能夠反向移動，也就是說例如現在的狀態為菜單二，單擊菜單一不能夠移動到菜單一處，這是什么原因呢
把相對距離改成絕對位置就行了~
? 好簡單的說~！
為什么我點擊導航菜單一，只有nomal的頁面有菜單一的矩形框顯示，click和hover都是空白的？
滾動的效果做出來了?？墒侨齻€導航點擊就消失了。。啥情況？
已經搞定了，。謝謝 ??
第四步：將動態面板“頁面”再轉成動態面板“內容”；這個有點沒懂，你是又新家了一個動態面板叫內容呢？還是說就把動態面板‘頁面’換了個名字叫內容
求指教 ，這個確實有點懂不起了
我也是這點蒙了
大矩形那個沒學會
大矩形包括三個小矩形，轉化為動態面板，進行操作的
我稀飯 ??
稀飯你 ??
加Q，求指導哈！??！
245417602
哪里沒懂？
請教下哦：
1. 將大矩形轉化為動態面板的時候是包含里面的小矩形嗎？如果是指選中大矩形右擊轉換的話效果和你的圖是不一致的了就；
2. 大矩形里的3個小矩形也轉為動態面板嗎？本文后半部分對3個菜單的操作是對哪三個菜單操作？
本人產品新人，如果問題有點愚蠢也請見諒哦 ?? ??
1.大矩形轉為動態面板，包含里面的小矩形；
2.后半部分對菜單添加事件操作部分是對三個類似導航條的菜單進行操作，不是大矩形里面的菜單。