Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/456.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/oop/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 本地滚动到带有单个链接的两个div_Javascript_Jquery_Html_Scroll_Scrollto - Fatal编程技术网

Javascript 本地滚动到带有单个链接的两个div

Javascript 本地滚动到带有单个链接的两个div,javascript,jquery,html,scroll,scrollto,Javascript,Jquery,Html,Scroll,Scrollto,我试图让一个链接滚动到两个不同溢出div中的两个不同点 这也许能更清楚地解释我想做什么 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

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

这也许能更清楚地解释我想做什么

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>
CSS

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


    });
#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;
    }
如果有人问过这个问题,请提前道歉,我的搜索没有结果


谢谢

这是一个非常简单的逻辑
. 按照链接获取完整的工作代码

以下是实现您的问题目标的用法和最佳方法:

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