jQuery定位滚动导航效果代码

收藏

这是一款jquery定位滚动导航效果代码,点击导航滚动到相对应的页面区域，支持鼠标滚动，类似fullPage.js插架

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

导航+相应项html

<div id="subNav"> 
  <ul class="wrap"> 
    <li class="adv_active"><a href="#hall_show" class="adv_door adv_active"><ins></ins>二手车旗舰店<span></span></a></li> 
    <li><a href="#checkCar" class="adv_source"><ins></ins>车源保证<span></span></a></li> 
    <li><a href="#alpha_price" class="adv_price"><ins></ins>价格透明<span></span></a></li> 
  
  </ul> 
</div> 
 
 
<!--hall_show--> 
<div id="hall_show" class="wrap"> 
  <div class="show_title"> 
    <h1><span></span>二手车旗舰店</h1> 
  </div> 
  <p>国内首家品牌二手车旗舰店，<ins>20000平米展馆</ins>，人性化设计，宽敞的车辆展示空间，360度无死角看车；独立交易室，购车安全感倍增；设有儿童区、免费水吧，让您不只是买卖车辆，更享受星级服务。位于北京市海淀区远大路1号金源购物中心，10号线直达，交通便捷。</p> 
  <ul class="hallImg_show clearfix"> 
    <li><img alt="大搜车，二手车，展馆，洽谈室" src="images/hall1.jpg" /></li> 
    <li><img alt="大搜车，二手车，展馆，接待区" src="images/hall2.jpg" /></li> 
    <li><img alt="大搜车，二手车，展馆，儿童区" src="images/hall3.jpg" /></li> 
    <li><img alt="大搜车，二手车，展馆，旗舰式展厅" src="images/hall4.jpg" /><ins>国际会展设施  可同时容纳超过700辆车</ins></li> 
    <li><img alt="大搜车，二手车，夜店，晚上22:00点" src="images/hall5.jpg" /><ins>首创“夜店”模式  营业至晚间22:00<br/> 
      为繁忙都市人提供灵活便捷的购车时间</ins></li> 
  </ul> 
</div> 
<!--hall_show end-->  
 
<!--rideCar--> 
<div id="checkCar" class="wrap"> 
  <div class="show_title"> 
    <h1><span></span>全方位检测&nbsp;&nbsp;保证车源质量</h1> 
    <p>大搜车的每一台在售车辆提供356项详细检测，包括底盘检测、发动机检测、驾驶体验检测、内饰外观检测及漆面修复检测。<br/> 
      操作工序多达468道，确保杜绝火烧车、水浸车及重大事故车辆，让您安心选车，放心购车。</p> 
  </div> 
  <div class="checkCar_show clearfix"> <img src="images/check1.jpg" /> <img src="images/check2.jpg" /> <img src="images/check3.jpg" /> </div> 
  <p class="check_decorate"><ins>360度全方位检测</ins>提供详细专业的检测报告</p> 
  <img src="images/check4.jpg"  class="check_img" /> </div> 
<!--rideCar end-->  
 
<!--alpha_price--> 
<div id="alpha_price" class="wrap"> 
  <div class="show_title"> 
    <h1><span></span>价格透明</h1> 
    <p>卖家自主定价<br/> 
      大搜车只收取卖家交易金额的3%作为服务费<br/> 
    </p> 
  </div> 
  <p class="price_decorate"></p> 
  <img src="images/alpha_price.png" /> </div> 
<!--alpha_price end-->

在页面下方直接载入js

<script> 
$(function(){ 
//优势页面点击子导航 
    var subNav_active = $(".adv_active"); 
    var subNav_scroll = function(target){ 
        subNav_active.removeClass    ("adv_active"); 
        target.parent().addClass("adv_active"); 
        subNav_active = target.parent(); 
    }; 
    $("#subNav a").click(function(){ 
        subNav_scroll($(this)); 
        var target = $(this).attr("href"); 
        var targetScroll = $(target).offset().top - 80; 
        $("html,body").animate({scrollTop:targetScroll},300); 
        return false; 
    }); 
    //页面跳转时定位 
    if(window.location.hash){ 
        var targetScroll = $(window.location.hash).offset().top - 80; 
        $("html,body").animate({scrollTop:targetScroll},300); 
    } 
    $(window).scroll(function(){ 
        var $this = $(this); 
        var targetTop = $(this).scrollTop(); 
        var footerTop = $("#footer").offset().top; 
        var height = $(window).height(); 
         
        if (targetTop >= 520){ 
            $("#subNav").addClass("fixedSubNav"); 
            $(".empty-placeholder").removeClass("hidden"); 
        }else{ 
            $("#subNav").removeClass("fixedSubNav"); 
            $(".empty-placeholder").addClass("hidden"); 
        } 
        if(targetTop < 750){ 
            subNav_scroll($(".adv_door")); 
        }else if(targetTop > 1200 && targetTop < 1640){ 
                subNav_scroll($(".adv_source")); 
        }else if(targetTop > 2314 && targetTop < 2734){ 
                subNav_scroll($(".adv_price")); 
        }else if(targetTop > 2968 && targetTop < 3268){ 
                subNav_scroll($(".adv_transfer")); 
        }else if(targetTop > 3327 && targetTop < 3627){ 
                subNav_scroll($(".adv_payment")); 
        }else if(targetTop > 3651 && targetTop < 4071){ 
                subNav_scroll($(".adv_promise")); 
        }else if(targetTop > 4163 && targetTop < 4473){ 
                subNav_scroll($(".adv_ride")); 
        }else if(targetTop > 4580){ 
            subNav_scroll($(".adv_finance")); 
        } 
    }) 
}()); 
</script>