LocalScroll to two divs with a single link

Question

I'm trying to have a single link scroll to two different points within two different overflowed divs.

Hereis a slightly working jsfiddle that maybe more clearly explains what I'm trying to do.

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;
    }

Sorry in advance if this question has been asked, my searching has yielded no results.

Thanks!

Answer 1

This is a very simple logic
Your solution is here on jsfiddle. follow the link to get the full working code.

here is usage and best way to accomplish your aim in respect to your question:

$(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();
    });
});