具体描述：当前页面两个滚动条，一个是页面滚动条，一个是DIV存放锚点的滚动条。需求是，滚动页面滚动条时，DIV滚动条随着页面滚动条滚动？意思是指，比如，右侧锚点位置在#5，DIV里的锚点链接也是在#5这个对应的锚点上，并且获取出当前这个锚点链接距离这个存放锚点链接的DIV顶部多少距离使其一直处于（滚动于）这个DIV的第二个位置上。如图所示：请问该如何实现，先谢谢啦！~

滚动页面滚动条，当触发锚点时如何控制另一个DIV里的滚动条一起滚动？

2 个回答

1429015561qqcom

✓ 已被采纳

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #toc{
                height: 250px;
                width: 200px;
                border:1px solid #ddd;
                overflow: auto;
                position: fixed;
                left: 50px;
                top: 50%;
                margin-top: -125px;
            }
            #toc li{
                height: 30px;
                margin: 10px 0px;
                width: 100%;
                padding-left: 20px;
            }
            
            .article-content{
                margin-left: 350px;
            }
            .article-content article{
                height: 800px;
                border: 1px solid #ddd;
                margin: 10px 0;
            }
            li.active{
                position: absolute;
                top: 40px;
                background-color: #f2f5f2;
                color: red;
            }
            h6.active{
                color: red;
            }
            ol{
                padding: 0px;
            }
        </style>
    </head>
    <body>
        <div id="toc" class="toc-article fixed height-255 overflow-auto">
            <ol class="toc">
                <li class="toc-item toc-level-6">
                    <a class="toc-link" data-id="1" href='###'>
                        <span class="toc-number">1.</span> <span class="toc-text">锚点链接1</span>
                    </a>
                </li>
                <li class="toc-item toc-level-6">
                    <a class="toc-link" data-id="2" href='###'>
                        <span class="toc-number">2.</span> <span class="toc-text">锚点链接2</span>
                    </a>
                </li>
                <li class="toc-item toc-level-6">
                    <a class="toc-link" data-id="3" href='###'>
                        <span class="toc-number">3.</span> <span class="toc-text">锚点链接3</span>
                    </a>
                </li>
                <li class="toc-item toc-level-6">
                    <a class="toc-link" data-id="4" href='###'>
                        <span class="toc-number">4.</span> <span class="toc-text">锚点链接4</span>
                    </a>
                </li>
                 <li class="toc-item toc-level-6">
                    <a class="toc-link" data-id="5" href='###'>
                        <span class="toc-number">5.</span> <span class="toc-text">锚点链接5</span>
                    </a>
                </li>
                <li class="toc-item toc-level-6">
                    <a class="toc-link" data-id="6" href='###'>
                        <span class="toc-number">6.</span> <span class="toc-text">锚点链接6</span>
                    </a>
                </li>
              
                <li class="toc-item toc-level-6">
                    <a class="toc-link" data-id="7" href='###'>
                        <span class="toc-number">7.</span> <span class="toc-text">锚点链接7</span>
                    </a>
                </li>
                 <li class="toc-item toc-level-6">
                    <a class="toc-link" data-id="8" href='###'>
                        <span class="toc-number">8.</span> <span class="toc-text">锚点链接8</span>
                    </a>
                </li>
                <li class="toc-item toc-level-6">
                    <a class="toc-link" data-id="9" href='###'>
                        <span class="toc-number">9.</span> <span class="toc-text">锚点链接9</span>
                    </a>
                </li>
                <li class="toc-item toc-level-6">
                    <a class="toc-link" data-id="10" href='###'>
                        <span class="toc-number">10.</span> <span class="toc-text">锚点链接10</span>
                    </a>
                </li>
                <li class="toc-item toc-level-6">
                    <a class="toc-link" data-id="11" href='###'>
                        <span class="toc-number">11.</span> <span class="toc-text">锚点链接11</span>
                    </a>
                </li>
                <li class="toc-item toc-level-6">
                    <a class="toc-link" data-id="12" href='###'>
                        <span class="toc-number">12.</span> <span class="toc-text">锚点链接12</span>
                    </a>
                </li>
            </ol>
        </div>

        <div class="article-content">
            <article>
                <h6 id="1">锚点标题位置1</h6>
                <p>内容1</p>
            </article>
            <article>
                <h6 id="2">锚点标题位置2</h6>
                <p>内容2</p>
            </article>
            <article>
                <h6 id="3">锚点标题位置3</h6>
                <p>内容3</p>
            </article>
            <article>
                <h6 id="4">锚点标题位置4</h6>
                <p>内容4</p>
            </article>
            <article>
                <h6 id="5">锚点标题位置5</h6>
                <p>内容5</p>
            </article>
            <article>
                <h6 id="6">锚点标题位置6</h6>
                <p>内容6</p>
            </article>
            <article>
                <h6 id="7">锚点标题位置7</h6>
                <p>内容7</p>
            </article>
            <article>
                <h6 id="8">锚点标题位置8</h6>
                <p>内容8</p>
            </article>
            <article>
                <h6 id="9">锚点标题位置9</h6>
                <p>内容9</p>
            </article>
            <article>
                <h6 id="10">锚点标题位置10</h6>
                <p>内容10</p>
            </article>
            <article>
                <h6 id="11">锚点标题位置11</h6>
                <p>内容11</p>
            </article>
            <article>
                <h6 id="12">锚点标题位置12</h6>
                <p>内容12</p>
            </article>
        </div>
    </body>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function (){
            elevator.init();
            debugger;
            $('#toc').on('click','.toc-link',function(e){
                $(this).parent('li').addClass('active').siblings().removeClass('active');
                $('#toc').scrollTop(0);
                var elemTop=getElementTop($('#'+$(this).attr('data-id')).parent()[0]);
                window.scrollTo(0,elemTop-elevator.UPLEVEL);
                
            });
        });

function getElementTop(elem){
    var elemTop=elem.offsetTop;
    elem=elem.offsetParent;
    while(elem!=null){
        elemTop+=elem.offsetTop;
        elem=elem.offsetParent;
    }
    return elemTop;
}
var elevator={
    FLOORHEIGHT:0,
    UPLEVEL:0,
    DOWNLEVEL:0,
    init:function(){
        var style=getComputedStyle($('article')[0]);
        this.FLOORHEIGHT=
            parseFloat(style.height)+parseFloat(style.marginBottom)
        this.UPLEVEL=(innerHeight-this.FLOORHEIGHT)/2;
        this.DOWNLEVEL=this.UPLEVEL+this.FLOORHEIGHT;
        window.addEventListener('scroll',this.scroll.bind(this));
    },
    scroll:function(){//在页面滚动时触发检测
        debugger
        var h=$('article h6');
        for(var i=0;i<h.length;i++){
            var elemTop=getElementTop(h[i]);
            var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;

            if(scrollTop>elemTop-this.UPLEVEL){
                h[i].className="";
            }else if(scrollTop>elemTop-this.DOWNLEVEL){
                $(h[i]).addClass('active');
                debugger;
                $('a[data-id="'+($(h[i]).attr('id'))+'"').parent().addClass('active').siblings().removeClass('active');
            }else{
                h[i].className="";
            }
        }
    },
    

}









    </script>
</html>

//这个是以前做的一个项目用到的代码，在这个基础上改的，所以有原生的，有jquery的。你试一下效果。

厦冰

8.5k52638

发布于
2017-12-14

监听页面的滚动事件，然后计算，设置div的滚动高度

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

滚动页面滚动条，当触发锚点时如何控制另一个DIV里的滚动条一起滚动？

你尚未登录，登录后可以

怎么获取动态弹出对话框的模拟单击？

像下面这样的jquery是在哪一步实现数据的双向绑定的呢？

多行表格中jquery的选择器为什么会出现无法选中dom的情况？