樓層導航欄實現
阿新 • • 發佈：2019-01-12
//點選回到當前樓層
aNav.click(function () {
var t = aDiv.eq($(this).index()).offset().top;
$('body,html').animate({
"scrollTop": t,
}, 500);
$(this).addClass('active').siblings().removeClass('active');
});
導航欄本質是一個ul li元素（aNav），每個li表示一個樓層 , 內容區域由多個div組成（aDiv），每個div表示一個樓層。
1. 當點選aNav中的li時，頁面內容區域隨之滾動到指定位置。
1. 判斷這個li的index(), 再找到對應aDiv的index()對應的div元素。
2. 得到此div的高的偏移量（$(‘') .offset().top），讓其body 滾動此偏移量的距離scrollTop(h)即可。
2. 當滾動頁面時aNav中的li也要跟著改變
1. 首先可以得到aDiv中的每一個div偏移量o，如果頁面向上滾動距離s大於o,那麼對應的div就能得到。
2. 取得這個div的index(),那麼對應的aNav的index從而找到aNav中的li，改變li樣式突出。
aNav.click(function () {
var t = aDiv.eq($(this).index()).offset().top;
$('body,html').animate({
"scrollTop": t,
}, 500);
$(this).addClass('active').siblings().removeClass('active');
});
導航欄本質是一個ul li元素（aNav），每個li表示一個樓層 , 內容區域由多個div組成（aDiv），每個div表示一個樓層。
1. 當點選aNav中的li時，頁面內容區域隨之滾動到指定位置。
1. 判斷這個li的index(), 再找到對應aDiv的index()對應的div元素。
2. 得到此div的高的偏移量（$(‘') .offset().top），讓其body 滾動此偏移量的距離scrollTop(h)即可。
2. 當滾動頁面時aNav中的li也要跟著改變
1. 首先可以得到aDiv中的每一個div偏移量o，如果頁面向上滾動距離s大於o,那麼對應的div就能得到。
2. 取得這個div的index(),那麼對應的aNav的index從而找到aNav中的li，改變li樣式突出。