JQuery scroll inside a div

Question

On a test web page, I have a div that holds a lot of text for the user to read. The user can add sections of the text to a separate text area.

I am trying to implement a feature to allow the user to scroll to the bottom of the div that holds all the text.

I have the code in place, but I cannot see why the scroll feature is not working!

I click the link and nothing happens.

I have read many posts and searched google, but I cannot find the issue.

This may be a simple error, but I cannot see it. I am hoping that someone can solve this for me.

Here is my code:

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

Here is what my screen looks like:

Answer 1

The issue is that the section you are trying to scroll is not where the overflow is. Try setting the height and overflow on #id_objective_suggestions_list (I accounted for some margin).

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