jQuery实现导航条楼层跳转功能

nav导航的html结构

        <!-- 导航 -->
        <!-- .part -->
　　　　 在需要跳转的楼层上添加part类名就行了

        <div class="line"></div>
        <div class="nav">
            <div class="swiper-container">
                <div class="swiper-wrapper wrapper">
                    <div class="swiper-slide list on">领券下单</div>
                    <div class="swiper-slide list">抽奖赢礼</div>
                    <div class="swiper-slide list">精选囤货</div>
                    <div class="swiper-slide list">半价专区</div>
                    <div class="swiper-slide list">爆款推荐</div>
                    <div class="swiper-slide list">大牌推荐</div>
                    <div class="swiper-slide list">更多福利</div>
                    <div class="swiper-slide list" id="last">特惠专区</div>
                </div>

                <div class="swiper-pagination"></div>
                <div class="direction"></div>
                <div class="direction direction-prev"></div>
                <div class="direction direction-next"></div>
            </div>
        </div>

nav导航的css样式

/*导航 start*/
.line {
  background-color: #fff;
}
.line.move {
  height: 0.8rem;
}
.nav {
  margin: 0 auto;
  height: 0.8rem;
  width: 100%;
  line-height: 0.8rem;
  text-align: center;
  background-color: #ffffff;
  z-index: 999;
  position: relative;
  color: #3c0486;
  font-size: 0.28rem;
  max-width: 7.5rem;
}
.nav.move {
  position: fixed;
  top: 0;
}
.nav.box {
  height: 3rem;
  border-top: 0.03rem solid #8fc1e8;
  width: 0.5rem;
}
.nav .swiper-container {
  height: 0.8rem;
}
.nav .swiper-slide {
  text-align: center;
  width: auto;
  color: #666666;
  white-space: nowrap;
  padding: 0 0.3rem;
}
.nav .swiper-slide.on {
  color: #fe8716;
}
/*导航 end*/

引入的JS代码

var navSwiper = new Swiper('.nav .swiper-container', {
    slidesPerView: 'auto',
    paginationClickable: true,
    pagination : '.nav .swiper-pagination',
    paginationHide :false,
    nextButton:'.nav .direction-next',
    prevButton:'.nav .direction-prev'
});

// 双旦狂欢
// var bashSwiper = new Swiper('.bash-list .swiper-container', {
//     slidesPerView: 'auto',//一行显示3个
//     slidesPerColumn: 3,//显示2行
//     spaceBetween :5,
// });
window.onload = function(){
    setTimeout(function() {
        loading();
    }, 600);
}

function loading(){
    var nowCur = $('.nav .swiper-wrapper div.on').index();
    // console.log(nowCur);
    if (nowCur>3) {
        $('.swiper-pagination .swiper-pagination-bullet').eq(nowCur-1).click();
    }
}


$(window).on( 'scroll' , function(){
    var nowTop = $(window).scrollTop();
    var a = 0;
    $('.part').each(function(){
        var nowIndex = $('.part').index(this);
        var boxTop = $(this).offset().top;
        if( boxTop <= nowTop + $('.nav').height()+10 ){
            a = nowIndex;
        }
    })
    var woca = $('.nav .swiper-wrapper div.on').index();
    
    $('.swiper-pagination span').eq(a).click();
    $('.nav .swiper-wrapper div').removeClass('on').eq(a).addClass('on');

    // 瀵艰埅楂樺害
    var lineTop = $('.line').offset().top;
    if( nowTop >= lineTop ){
        $('.nav,.line').addClass('move');
    } else {
        $('.nav,.line').removeClass('move');
    }
})
$('.direction').bind('click',function(){
    if( $(this).hasClass('swiper-button-disabled') && $(this).hasClass('direction-next') ){
        // $('.direction-prev').fadeIn(600);
        // $('.direction-next').fadeOut(600);
    } else if ( $(this).hasClass('swiper-button-disabled') && $(this).hasClass('direction-prev')  ) {
        // $('.direction-next').fadeIn(600);
        // $('.direction-prev').fadeOut(600);
    }
})
$('.nav .swiper-slide').click(function(){
    var nowIndex = $(this).index();
    $('body,html').animate({'scrollTop':$('.part').eq(nowIndex).offset().top - $('.nav').height() })
})

实现的效果：