jquery如何做出标签页标签点击时候控制滚动条

Question

就是当我点击标签时候滚动条滚动固定到点击的那个位置

Answer 1

以下做一个参考，将导航包裹一层div，设置其宽度100%，超出x轴滚动，超出y轴隐藏，然后通过点击导航让其移动

/*样式*/

.scroll-nav{overflow-x:auto; overflow-y:hidden; white-space:nowrap;}

/*页面*/

<div class="scroll-nav">

    <ul>

        <li class="active">壹号土猪</li>

        <li>金利白猪</li>

        <li>五谷草猪</li>

        <li>壹号土猪</li>

        <li>壹号土猪</li>

    </ul>

</div>

/*js*/

初始时计算导航li的宽度，给ul赋值

$(function(){

    var liLen = $(".scroll_nav li").outerWidth();

    var liCount = $(".scroll_nav ul").children().length;

    $(".scroll_nav ul").css("width",(liLen*liCount)+'px');

    // 点击导航

    $(".scroll_nav li").click(function(){

        //移动导航

        $(this).addClass("active").siblings().removeClass("active");

        var index = $(this).index();

        var liW = $(this).width();

        $('.scroll_nav').stop().animate({scrollLeft:index*liW},300);

    });

})