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

Question

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

Answer 1

父元素作为视口 overflow:hidden
再用一个新容器包裹所有的标签的页面
然后设置位移量就行了

Answer 2

以下做一个参考，将导航包裹一层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);
    });
})