LocalScroll to two divs with a single link

LocalScroll to two divs with a single link

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!