scrollTop按钮仅在首次点击时起作用

问题描述

我有一个使用overflow-y: scroll;的div，我想使用一个按钮，单击该按钮将移至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>

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

解决方法

为使其正常工作，您必须为每次点击添加或减去值。

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

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