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

Looks complicated. Do these solutions help at all? https://stackoverflow.com/questions/37084343/jquery-scrolltop-in-container-on-click-only-works-once https://stackoverflow.com/questions/45191067/scrolltop-only-works-on-first-click — react_or_angluar, Nov 02 '20 at 07:57

54ka · Accepted Answer · 2020-11-02T08:14:21.380

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>

scrollTop button works on the first click only

1 Answers1