0

我试图让单个链接滚动到两个不同溢出的 div 中的两个不同点。

这是一个稍微有效的jsfiddle ，它可能更清楚地解释了我正在尝试做的事情。

HTML

<div id="small-box-links">

    <a href="#small-box1">Link to small-box #1 and #5</a>
    <a href="#small-box2">Link to small-box #2 and #4</a>
    <a href="#small-box3">Link to small-box #3 and #6</a>

</div>

<div id="small-box-container">
    <div id="small-box1" class="small-box">Small-Box #1</div>
    <div id="small-box2" class="small-box">Small-Box #2</div>
    <div id="small-box3" class="small-box">Small-Box #3</div>
</div>


<div id="small-box-container2">
    <div id="small-box4" class="small-box">Small-Box #4</div>
    <div id="small-box5" class="small-box">Small-Box #5</div>
    <div id="small-box6" class="small-box">Small-Box #6</div>
</div>

JS

 $(document).ready(function()
    {

        // Scroll the content inside the #scroll-container div
        $('#small-box-links').localScroll({
           target:'#small-box-container'
        });

        $('#small-box-links').localScroll({
           target:'#small-box-container2'
        });


    });

CSS

#small-box-container {
        border: 1px solid black;
        padding: 20px;
        width: 300px;
        height: 200px;

        overflow: scroll;
    }

        #small-box-container2 {
        border: 1px solid black;
        padding: 20px;
        width: 300px;
        height: 200px;

        overflow: scroll;
    }

    .small-box {

        color: #fff;
        padding: 10px;

        width: 200px;
        height: 200px;
        margin: 0 0 50px 0;
    }

    #small-box1 {
        background: blue;
    }

    #small-box2 {
        background: red;
    }

    #small-box3 {
        background: green;
    }

    #small-box4 {
        background: orange;
    }

    #small-box5 {
        background: purple;
    }

    #small-box6 {
        background: yellow;
    }

如果有人问过这个问题，请提前抱歉，我的搜索没有结果。

谢谢！

4

1 回答 1

0

这是一个非常简单的逻辑
您的解决方案在 jsfiddle 上。按照链接获取完整的工作代码。

这是实现您的问题目标的用法和最佳方法：

$(function() {
    //========= Funct to Scroll box #1 n #4         
    $('a#box1').on('click', function() {
        $('#small-box1').ScrollTo();
        $('#small-box4').ScrollTo();
    });
    //========= Funct to Scroll box #2 n #5         
    $('a#box2').on('click', function() {
        $('#small-box2').ScrollTo();
        $('#small-box5').ScrollTo();
    });    
    //========= Funct to Scroll box #3 n #6         
    $('a#box3').on('click', function() {
        $('#small-box3').ScrollTo();
        $('#small-box6').ScrollTo();
    });
});
于 2013-09-11T06:29:15.480 回答