scrollTop button works on the first click only

Question

I have a div that uses overflow-y: scroll; I want to use a button that on click it will move to the next row on the div. My code works perfect for the first click only after that no action for the click.

 <button class="big-scrolTopBtn" id="slideLeft" type="button"><span class="fa fa-chevron-up"></span></button>
        <div class="partners-inner big-scrol" id="scrol">
            <div class="">

                <div class="row media-row-height " style="text-align:center;" dir="rtl">
                    @foreach (var item in Model)
                    {
                       
                            foreach (var item1 in item.tbl_Videos)
                            {

                                <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 left-border directors-top-padding" style="text-align:center;">
                                    @if (!string.IsNullOrEmpty(item1.PhotoURL))
                                    { 
                                                <a href="@item1.VideoURL">
                                                </a>
                                                <img src="@Url.Content(String.Format(ConfigurationManager.AppSettings["AdminDomain"] + "{0}", Url.Content(item1.PhotoURL)))" class="img-media">

                                    }
                                </div>

                            }
                        }
                    </div>

            </div>
        </div>
        <button class="scrolBotBtn" id="slideRight" type="button"><span class="fa fa-chevron-down"></span></button>

JS:

$(document).ready(function () {

        $('#slideRight').click(function () {

            $('#scrol').scrollTop(300);
        });

        $('#slideLeft').click(function () {
            $('#scrol').scrollTop(-300);
        });
    });

CSS:

.big-scrol {
        height: 300px;
        overflow-y: scroll;
    }

    .media-row-height {
        height: 900px;
        width: 1500px;
        margin: auto;
        padding: 10px;
    }

Answer 1

For it to work correctly, you must add or subtract value with each click.

We also need to know how high the scrolling element is to be able to stop adding values. For this I added the ID id="wrap" of the element being scrolled

 $(document).ready(function () { var top = 0; var winH = $('#wrap').height(); $('#slideRight').click(function () { if (top < winH) { top = top + 300; }; $('#scrol').scrollTop(top); }); $('#slideLeft').click(function () { top = top - 300; if (top < 0) { top = 0 }; $('#scrol').scrollTop(top); }); });

 .big-scrol { height: 300px; overflow-y: scroll; } .media-row-height { height: 900px; width: 1500px; margin: auto; padding: 10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <button class="big-scrolTopBtn" id="slideLeft" type="button"><span class="fa fa-chevron-up">UP</span></button> <div class="partners-inner big-scrol" id="scrol"> <div class=""> <div id="wrap" class="row media-row-height" style="text-align:center;" dir="rtl"> <!-- @foreach (var item in Model) { foreach (var item1 in item.tbl_Videos) { <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 left-border directors-top-padding" style="text-align:center;"> @if (!string.IsNullOrEmpty(item1.PhotoURL)) { <a href="@item1.VideoURL"> </a> <img src="@Url.Content(String.Format(ConfigurationManager.AppSettings[" AdminDomain"] + "{0}" , Url.Content(item1.PhotoURL)))" class="img-media"> } </div> } } --> </div> </div> </div> <button class="scrolBotBtn" id="slideRight" type="button"><span class="fa fa-chevron-down">DOWN</span></button>