JQuery прокрутка внутри div - PullRequest
Новая
       24

JQuery прокрутка внутри div

0 голосов
/ 15 мая 2018

На тестовой веб-странице у меня есть div, который содержит много текста для чтения пользователем. Пользователь может добавлять разделы текста в отдельную текстовую область.

Я пытаюсь реализовать функцию, позволяющую пользователю прокрутить до нижней части div, который содержит весь текст.

У меня есть код, но я не понимаю, почему не работает функция прокрутки!

Я нажимаю на ссылку, и ничего не происходит.

Я прочитал много постов и искал в Google, но не могу найти проблему.

Это может быть простой ошибкой, но я ее не вижу. Я надеюсь, что кто-то может решить это для меня.

Вот мой код: 

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

Вот как выглядит мой экран:

enter image description here

1 Ответ

0 голосов
/ 15 мая 2018

Проблема в том, что раздел, который вы пытаетесь прокрутить, находится не там, где переполнение. Попробуйте установить высоту и переполнение в #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>
...