用jq实现简单的锚点切换

功能描述

想了半天 还是没有取好名字，这是一个蛮难形容的效果，不过现在的很多门户网站都会有这样的效果。

举个栗子：

页面分为四个区域：

 

当浏览到页面的相应区域时，这块指示牌上的对应版块高亮显示。并且点击指示牌上的对应版块，也可以将页面滑动到指定的区域。

 

知识点概要

 

1.$(window).scroll()

       当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（这里主要监听浏览器窗口）。

   scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

2.scrollTop()

        scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。scroll top offset 指的是滚动条相对于其顶部的偏移。

    如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

3.offset()

        offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。返回第一个匹配元素的偏移坐标。

    该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

 

功能实现

    首先我们需要将页面上的区域对应的DOM块插入一个数组中，方便获取每块区域在页面中的位置。

    var top_Arr =[];
    varAbout_main= $(".About_main")
    //将所需的区域对应的Class插入jq选择器队列中，并通过each遍历到数组中
    $(".About_main,.About_main1").each(function(){
    top_Arr.push($(this))
    })

我的html代码 布局如下：

指示牌的html代码为：

    <divclass="About_nav">
    <divclass="tab1">
    <ul>
    <liclass="slt"><imgclass="sanjiao"style="bottom:0; left:78px;"src="images/sanjiao.png"/><astyle="background-position:18px-26px;">公司简介</a></li>
    <li><imgclass="sanjiao"style="bottom:0; left:261px;"src="images/sanjiao.png"/><astyle="background-position:-32px0;">发展历程</a></li>
    <li><imgclass="sanjiao"style="bottom:0; left:444px;"src="images/sanjiao.png"/><astyle="background-position:-136px0;">团队风采</a></li>
    <li><imgclass="sanjiao"style="bottom:0; left:627px;"src="images/sanjiao.png"/><astyle="background-position:-80px0;">领导关怀</a></li>
    </ul>
    </div>
    </div>

scroll事件代码如下：

    $(window).scroll(function(){
    About_main.each(function(i){
    //将对应区域距离页面头部的距离 保存到一个变量中
    var sss =($(this).offset().top)-200,
    //滚动条已滚动的距离
    winST = $(window).scrollTop(),
    //判断当前页面是否处于某个区域中
    inArea = sss < winST && winST <(sss + $(this).height());
    if(inArea){
    //移除所有高亮class
    $(".tab1 li.slt").removeClass("slt")
    //将所有指示牌图标改为为红色背景
    $(".tab1 li a").position_y(0)
    //将区域对应的指示牌图标变为白色背景 并且添加高亮class
    $(".tab1 li").eq(i).addClass("slt").find("a").position_y(-26)
    }
    })
    })

代码中的position_y为修改background-position的对应y轴的值：

    $.fn.extend({
    position_x:function(x){
    var _this = $(this)
    _this.each(function(){
    var y = $(this).css("background-position").split('px')[1]
    $(this).css("background-position", x +"px"+ y +"px")
    })
    return _this
    },
    position_y:function(y){
    var _this = $(this)
    _this.each(function(){
    var x = $(this).css("background-position").split('px')[0]
    $(this).css("background-position", x +"px "+ y +"px")
    })
    return _this
    }
    })

然后是点击指示牌的某版块 可以将页面滑动到版块对应的区域：

    $(".tab1 li").click(function(){
    var index = $(this).index()
    $('body,html').animate({ scrollTop: top_Arr[index].offset().top -100},800);
    })

具体的功能代码已经全部贴上，基本上的问题 也在注释中已经注明，其中 需要特别提一下的是：

1.sss =($(this).offset().top)-200

    这里为什么要-200？因为我这里的指示牌是fixed定位在页面的顶部，如果没有这200像素的偏移，将会导致指示牌遮挡住区域的内容。

2.inArea = sss < winST && winST <(sss + $(this).height());

  贴个图片更形象一点（画的有点难看，各位看官意思下看得懂就行。。），下图所示对应的 sss和winST都是指什么。

这块代码的意思就是 当页面处于区域范围之中时，返回true。sss是区域块到页面顶部的距离，假如sss < winST 说明当前看得见的页面处于这个区域的上边框的下方。winST <(sss + $(this).height())指的是看得见的部分处于对应区域的下边框的上方。然而满足这两个条件就可以说明，当前的可视区域处于对应的区域范围中。

 

总结

    这段功能的实现 并不是有多么高的技术含量，是很基本的方法的运用。贴出来也是为一些想实现该效果，但是心中没有头绪，只能找另外的插件来实现的前端道友看看的，请大神看到这段代码，留下宝贵的意见 因为代码还是存在很多问题或者需要优化。

 

 

 

 

 

 

 

来自为知笔记(Wiz)