Diego182 Diego182 - 5 months ago 11
Javascript Question

Scroll to id with ajax

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

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();