Javascript scrollTop按钮仅在第一次单击时起作用

我有一个div，它使用

overflow-y:scroll我想使用一个按钮，点击后它将移动到div的下一行。我的代码只在第一次点击后才完美工作，点击没有动作

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

CSS:

要使其正常工作，必须在每次单击时添加或减去值

我们还需要知道滚动元素有多高才能停止添加值。为此，我添加了正在滚动的元素的ID
ID=“wrap”


$（文档）.ready（函数（）{
var-top=0；
var winH=$（'#wrap'）.height（）；
$（'#slideRight'）。单击（函数（）{
如果（top
。大阴囊{
高度：300px；
溢出y：滚动；
}
.媒体行高度{
高度：900px；
宽度：1500px；
保证金：自动；
填充：10px；
}

向上的
向下
要使其正常工作，必须在每次单击时添加或减去值

我们还需要知道滚动元素有多高才能停止添加值。为此，我添加了正在滚动的元素的ID
ID=“wrap”


$（文档）.ready（函数（）{
var-top=0；
var winH=$（'#wrap'）.height（）；
$（'#slideRight'）。单击（函数（）{
如果（top
。大阴囊{
高度：300px；
溢出y：滚动；
}
.媒体行高度{
高度：900px；
宽度：1500px；
保证金：自动；
填充：10px；
}

向上的
向下
看起来很复杂。这些解决方案有帮助吗？看起来很复杂。这些解决方案有帮助吗？
$(document).ready(function () {

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

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

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

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

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