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

【问题标题】：scrollTop button works on the first click onlyscrollTop 按钮仅在第一次单击时起作用
【发布时间】：2021-02-14 21:01:31
【问题描述】：

我有一个使用 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;
    }

【问题讨论】：

看起来很复杂。这些解决方案有帮助吗？ stackoverflow.com/questions/37084343/…stackoverflow.com/questions/45191067/…

标签： javascript html jquery css asp.net-mvc

【解决方案1】：

要使其正常工作，您必须在每次点击时增加或减少价值。

我们还需要知道滚动元素有多高才能停止添加值。为此，我添加了被滚动元素的 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>

【讨论】：