Question

在测试网页上，我有一个div，其中包含大量文本供用户阅读。用户可以将文本的各个部分添加到单独的文本区域。

我正在尝试实现一项功能，允许用户滚动到包含所有文本的div的底部。

我有代码，但我不明白为什么滚动功能不起作用！

我点击链接，没有任何反应。

我看了很多帖子并搜索了谷歌，但我找不到问题。

这可能是一个简单的错误，但我看不到它。我希望有人能为我解决这个问题。

这是我的代码：

    <div id="id_objective_suggestions_list">
        <div class="suggestions_subHeading margin-bottom-5">Suggestions</div>

        <a id="id_suggestions_objective" class="cursor_standard">Scroll Down</a>

        <div class="suggestion_content_details rounded margin-bottom-5"><div class="margin-bottom-5">&#8226;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante lorem, pretium eu commodo ac, finibus ac lorem. In eu gravida neque. &#10;</div><div class="suggestion_add_button_text"><button class="btn rounded btn-xs btn-primary" type="button">Add</button></div></div>

        <div class="suggestion_content_details rounded margin-bottom-5"><div class="margin-bottom-5">&#8226;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante lorem, pretium eu commodo ac, finibus ac lorem. In eu gravida neque. &#10;</div><div class="suggestion_add_button_text"><button class="btn rounded btn-xs btn-primary" type="button">Add</button></div></div>

        ....

        <a id="id_suggestions_objective_anchor_bottom"></a>
    </div>

    <script type="text/javascript">
            $('#id_suggestions_objective').on('click', function() {
             $('#id_objective_suggestions_list').animate({scrollTop: $("#id_suggestions_objective_anchor_bottom").offset().top-25},'slow');
        });
    </script>

以下是我的屏幕：

Answer 1

问题是您尝试滚动的部分不是溢出的部分。尝试在#id_objective_suggestions_list上设置高度和溢出（我占了一些余量）。

$(document).ready(function(){
    $('#id_suggestions_objective').on('click', function() {
        var offset = $("#id_suggestions_objective_anchor_bottom").offset().top - 25;
        $('#id_objective_suggestions_list').animate({
            scrollTop: offset
        }, 'slow');
    });
});

#id_objective_suggestions_list {
  background:aliceblue;
  width:50%;
  float:right;
  height:calc(100vh - 10px);
  overflow:auto;
}
#id_suggestions_objective {
  text-decoration:underline;
    color:darkblue;
  cursor:pointer;
}
.suggestion_content_details {
  height:250px;
  border:thin solid #DDD;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id_objective_suggestions_list">
    <div class="suggestions_subHeading margin-bottom-5">Suggestions</div>

    <a id="id_suggestions_objective" class="cursor_standard">Scroll Down</a>

    <div class="suggestion_content_details rounded margin-bottom-5">
        <div class="margin-bottom-5">&#8226;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante lorem, pretium eu commodo ac, finibus ac lorem. In eu gravida neque. &#10;</div>
        <div class="suggestion_add_button_text">
            <button class="btn rounded btn-xs btn-primary" type="button">Add</button>
        </div>
    </div>

    <div class="suggestion_content_details rounded margin-bottom-5">
        <div class="margin-bottom-5">&#8226;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante lorem, pretium eu commodo ac, finibus ac lorem. In eu gravida neque. &#10;</div>
        <div class="suggestion_add_button_text">
            <button class="btn rounded btn-xs btn-primary" type="button">Add</button>
        </div>
    </div>

    ....

    <a id="id_suggestions_objective_anchor_bottom"></a>
</div>

JQuery在div中滚动

1 个答案: