京東樓層跳躍效果(利用錨點跳轉至對應樓層,或者使用animate函式)
阿新 • • 發佈:2019-01-06
html
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="navWrap"> <li class="current"><a href="#item1">1樓</a></li> <li><a href="#item2">2樓</a></li> <li><a href="#item3">3樓</a></li> <li><a href="#item4">4樓</a></li> <li><a href="#item5">5樓</a></li> </ul> <ul class="floorWrap"> <li id="item1" class="item">一樓內容</li> <li id="item2" class="item">二樓內容</li> <li id="item3" class="item">三樓內容</li> <li id="item4" class="item">四樓內容</li> <li id="item5" class="item">五樓內容</li> </ul>
css
html * {font-family:"Microsoft YaHei","tahoma ","Arial",;} html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:none;font-weight:inherit;font-style:inherit;} li{list-style: none;} .navWrap{width: 100px;height: 200px;position: fixed;left: 50%;top: 100px; margin-left:250px;border: #666 solid 1px;} .navWrap li{width: 100px;height: 40px;text-align: center;line-height: 40px;} .navWrap li a{color:#000;text-decoration: none;display: block;} .floorWrap{width:500px;margin:0 auto;} .floorWrap li{height: 600px;text-align: center;line-height: 600px;border: 1px solid red;} .current{background-color: #908CC8;} .current a{color:#fff;}
javascript
$(window).on("scroll",function(){ var scrollTop = $(document).scrollTop(); var floor = $('.floorWrap'); var nav = $('.navWrap').find('li'); var items = $('.floorWrap').find('.item'); items.each(function(){ var m=$(this); var itemTop = m.offset().top; if(scrollTop>itemTop-200){ console.log(scrollTop-itemTop); nav.eq(m.index()).addClass('current').siblings().removeClass('current'); }else{ return false; } }) })
想讓樓層有滑動效果的話加上這個函式(去掉HTML程式碼裡的錨點)
$(".navWrap li").on("click",function(){
var m=$(this);
var nav = $('.navWrap').find("li");
var floor = $(".floorWrap").find("li");
var floorOffsetTop = floor.eq(m.index()).offset().top;
$("body,html").animate({
"scrollTop":floorOffsetTop
},500)
})