課程
/前端開發
/JavaScript
/網頁定位導航特效
能不能點擊第幾樓的導航的時候讓它滾動回到第幾樓，就是讓它有個滾動的動畫，求回答
2016-10-05
源自：網頁定位導航特效 4-2
正在回答
$(function(){ ? ?$("ul li a").click(function(){ ? ? ??
??????? var hr = $(this).attr("href"); ? ? ??
???????? var anh = $(hr).offset().top;
???????? $("html,body").stop().animate({scrollTop:anh},2000); ? ?})})
同一個頁面中做錨鏈接，可以點擊元素，讓頁面跳到指定位置。
現在做的這個效果，不是突默認的瞬間跳到指定位置，而是滑動。這樣的用戶體驗會好些。
思路：
1.獲取到需要跳到頁面地方的元素，想對于頁面頂部的距離?$(hr).offset().top;
2.將這個值給html或body元素，讓其滾動條，執行一個animate動畫。這個動畫，是改變瀏覽器滾動條相對頂部的值。
注意：
1.$(this).attr("href");這返回期，正好可以做為JQuery的選擇器。2..stop()防止不停點擊，會不停產生動畫列隊的bug.
http://www.cnblogs.com/lufy/archive/2012/05/15/2501153.html? 可以參考這個理解
舉報
本課程講解網頁定位導航特效，仿天貓版地狗購物網，你值得擁有
2 回答帶jQuery和css3動畫效果
6 回答帶jQuery和css3動畫效果
3 回答動畫效果來了
1 回答動畫效果問題
2 回答錨點動畫的問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-10-06
$(function(){
? ?$("ul li a").click(function(){ ? ? ??
??????? var hr = $(this).attr("href"); ? ? ??
???????? var anh = $(hr).offset().top;
???????? $("html,body").stop().animate({scrollTop:anh},2000);
? ?})
})
同一個頁面中做錨鏈接，可以點擊元素，讓頁面跳到指定位置。
現在做的這個效果，不是突默認的瞬間跳到指定位置，而是滑動。這樣的用戶體驗會好些。
思路：
1.獲取到需要跳到頁面地方的元素，想對于頁面頂部的距離?$(hr).offset().top;
2.將這個值給html或body元素，讓其滾動條，執行一個animate動畫。這個動畫，是改變瀏覽器滾動條相對頂部的值。
注意：
1.$(this).attr("href");這返回期，正好可以做為JQuery的選擇器。
2..stop()防止不停點擊，會不停產生動畫列隊的bug.
http://www.cnblogs.com/lufy/archive/2012/05/15/2501153.html? 可以參考這個理解