Scroll to id with ajax

Question

I'm editing my comments with AJAX; after updating a comment I would like scroll down to the updated comment:

$("#aggiorna").click(function(){

    var value = $("#id").val();
    var dato = $("#comment_edit").val();
    var dato1 = $("#user_id").val();
    var dato2 = $("#article_id").val();
    var dato3 = $("#product_id").val();
    var route = "http://localhost:8000/comment/"+value+"";
    var token = $("#token").val();

    $.ajax({
        url: route,
        headers:{'X-CSRF-TOKEN':token},
        type: 'PUT',
        dataType: 'json',
        data: {content: dato,
               user_id: dato1,
               article_id: dato2,
               product_id: dato3,},
        success: function(){
            carga();
            $('#myModal').modal('hide');

            $("#msj-success-updated").fadeIn();

        }

    });


});

$("#aggiorna").click(function() {
            $('html, body').animate({
                scrollTop: $("#"+value+"").offset().top
            }, 2000);
});

I would like scroll to:

<div id="id of my comment">

I'm using this code to scroll:

scrollTop: $("#"+value+"").offset().top

where

var value = $("#id").val();

have id of my comment updated, Maybe scrollTop is wrong, I don't know. How can I fix it? thank you for your help!

i have:

    <div class="comment">
    <a class="comment-avatar" href="{{url($comment->user->username)}}">
        <img class="avatar-image-comments" src="{{url($comment->user->profile)}}" width="60" alt="">
    </a>

    <div class="comment-body">
        <strong>{{ $comment->user->username }}</strong>
        <h7 class="comment-date">  -  commentato il {{ $comment->created_at }}</h7>
        <p class="comment-text">{{ $comment->content }}</p>
        <input type="hidden" id="{{$comment->id}}">

        @if(Auth::check())
            @if(Auth::user()->id == $comment->user->id || Auth::user()->usertype == 3 )
                <div class="reply">
                    <div class="inline">
                        <button type="button" value="{{ $comment->id }}" onclick="Mostrar(this)" id="id_comment" class="btn btn-circle btn-dark btn-xs btn-outline" data-toggle="modal" data-target="#myModal">
                            <span>editare</span>
                        </button>                      

                    </div>
                    <div class="inline">{!! Form::open(['route'=>['comment.destroy',$comment->id]]) !!}
                        <input type="hidden" name="_method" value="DELETE">
                        <button type="submit" class="btn btn-circle btn-dark btn-xs btn-outline">
                            <span>Elimina</span>
                        </button>
                        {!! Form::close() !!}
                    </div>
                </div>
            @endif
        @endif
    </div>
</div>

my input hidden help me to GET id of comment that i want edit, this help my controller to update the right comment id.

Answer 1

In your code , value should be the id of the comment you want to scroll to.

$("#aggiorna").click(function() {
            $('html, body').animate({
                scrollTop: $("#"+value+"").offset().top
            }, 2000);
});

Have a look at this example :

$(function() {
  $("#scrl_btn").click(function() {
    $('html,body').animate({
      scrollTop: $("#second").offset().top
    }, 'slow');
  });
});

.first {
  height: 1500px;
  width: 200px;
  background-color: blue;
  color: white;
}
.second {
  height: 150px;
  width: 200px;
  background-color: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="scrl_btn">
  Scroll to second div
</button>
<div class="first" id="first">
  1st div
</div>
<div class="second" id="second">
  2nd div
</div>

---

In your code you have written two click methods, In the first you have created a local var : value and you are trying to use it in the second click method. In second method you need to add this var value = $("#id").val();