Horizontally scroll hidden overflow-x with buttons and JS

Question

I'm trying to use buttons on the right/left sides to scroll horizontally in a div that has multiple a tags, so I can't use the same button to scroll to a #hashtag. What I am trying to do is exactly just as Google Images Search header for different tags:

Link to example

<div class="custHdrBtns">
    <div class="allPlacesBtn">

    </div>
    <div class="OYi prc"> 


            <div class="prsc prse">

                <div class="prs">

                    <div class="Jyg">

                        <div class="ichpcnt" id="scrollArea">

                            <div class="Iyg">

                                <div class="vc_btn3-container  headBtns vc_btn3-center">

                                    <a  href="#1499936731811-0893bace-de28" title="">link</a>
                                    <a  href="#1499936731811-0893bace-de28" title="">link</a>
                                    <a  href="#1499936731811-0893bace-de28" title="">link</a>
                                    <a  href="#1499936731811-0893bace-de28" title="">link</a>
                                    <a  href="#1499936731811-0893bace-de28" title="">link</a>
                                    <a  href="#1499936731811-0893bace-de28" title="">link</a>
                                    <a  href="#1499936731811-0893bace-de28" title="">link</a>
                                    <a  href="#1499936731811-0893bace-de28" title="">link</a>
                                    <a  href="#1499936731811-0893bace-de28" title="">link</a>
                                    <a  href="#1499936731811-0893bace-de28" title="">link</a>
                                    <a  href="#1499936731811-0893bace-de28" title="">link</a>

                                </div>

                            </div>


                        </div>

                    </div>
                </div>
            </div>

    </div>
</div>

and my CSS :

.prsc {
    overflow-x: hidden;
    overflow-y: hidden;
    display: block;
    padding-top : 1px;
}

.prs {                                          /* the elements inside */
    display: inline-block;
    height: inherit;
    left: 20px;
    padding-bottom: 5px;
    padding-right: 5px;
    position: relative;
    vertical-align: top;
    white-space: nowrap;
    float: right; 
}
.Jyg {
    height: 80px;
    margin: -10px 2px 0;
    overflow: hidden;
    display: block;
}

.ichpcnt {
    -webkit-overflow-scrolling: touch;
    height: 100px;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 10px 0 0;
    white-space: nowrap;
    width: 100%;
    display: block;
}
.Iyg {
    margin-right: 6px;
    display: inline-block;
}


.prc {     /* the whole inner */
    margin: -30px 0px 0;
    padding: 10px 0px 10px 0;
    position: relative;
    overflow: hidden;
}
.OYi {
    height: 90px;
    display: block;
}

.allPlacesBtn{
    font-family: cairo;
    margin-top: -40px;
    margin-bottom: 25px;
    font-size: 45px;
    display : grid;
}


.prp {
    background: white;
    bottom: 0;
    opacity: 1;
    position: absolute;
    top: 11px;
    width: 20px;
    z-index: 10;
    display: block;
}

Answer 1

the key is using white-space: nowrap;

 $('#prev').on('click', function() { $('#menu ul').animate({ scrollLeft: '-=100' }, 300, 'swing'); }); $('#next').on('click', function() { $('#menu ul').animate({ scrollLeft: '+=100' }, 300, 'swing'); }); 

 #menu { position: relative; } ul { width: 300px; overflow: hidden; white-space: nowrap; display: block; list-style: none; padding: 0; } li { width: 80px; height: 50px; display: inline-block; text-align: center; } li:nth-child(odd) { background-color: yellow; } li:nth-child(even) { background-color: blue; } #nav { position: absolute; top: 0; width: 300px; } #prev { display: inline-block; position: absolute; left: 0; background-color: #ceaaaa; padding: 5px; cursor: pointer; top: 10px; font-weight: bold; } #next { position: absolute; right: 0; display: inline-block; background-color: #ceaaaa; padding: 5px; cursor: pointer; top: 10px; font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="menu"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item7</li> </ul> <div id="nav"> <div id="prev">Prev</div> <div id="next">Next</div> </div> </div>