Level 2
please guide me
Jun 23, 2021
6
Level 2
how to scroll to the reply comment in javascript
Hi, I want to scroll down and put it in the reply box when I click on the reply to the comment, but this code does not work
<div class="reply">
<a href="#reply" onclick="setReplyParent({{ $comment->id }})" id="comment" class="comment-reply-link">reply</a>
</div>
<script>
$(document).ready(function() {
$('.comment-reply-link[href^="#reply"]').on('click', function(e) {
if (this.hash !== "") {
e.preventDefault();
let hash = this.hash;
$('html, body').animate({
'scrollTop': $(hash).offset().scrollHeight 100
},900, 'swing', function() {
window.location.hash = target;
});
}
});
});
</script>
<form class="comment-form" action="#"method="post">
<p class="comment-form-comment">
<textarea name="body" cols="45" placeholder="comment ..."rows="5" ></textarea>
</p>
</form>
Level 55
Hi, I want to scroll down and put it in the reply box
what is it here? what do you want to put in reply box?
$(document).ready(function() {
$('.comment-reply-link').on('click', function(e) {
// if (this.hash !== "") { // what is this.hash?
e.preventDefault();
// let hash = this.hash;
$('html, body').animate({
'scrollTop': $('['name="body"]').offset().top // scroll to textarea
},900, 'swing', function() {
// window.location.hash = target; // what is that?
});
}
});
});
Level 2
I like when I click on reply Scroll down And focus on the comment box
Level 55
<textarea name="body" id="body" cols="45" placeholder="comment ..." rows="5" ></textarea>
$(document).ready(function() {
$('.comment-reply-link').on('click', function(e) {
// if (this.hash !== "") { // what is this.hash?
e.preventDefault();
// let hash = this.hash;
$('html, body').animate({
'scrollTop': $('#body').offset().top // scroll to textarea
},900, 'swing', function() {
$('#body').focus();
});
}
});
});
Level 50
it is a bit messy, why is there a 100 after scrollHeight? there is even no scrollHeight on offset() returned object.
what is the meaning of the hash variable? it is a '#reply', but why do you try to get coordinates of the reply, don't you want to scroll to the comment box?
there is no target variable set. you need to fix that too.
here is a working example to scroll to the textarea and focus it if you click the reply link. but it needs a bit of tweaking to make it work as you expect
$(document).ready(function() {
$('.comment-reply-link[href^="#reply"]').on('click', function(e) {
if (this.hash !== "") {
e.preventDefault();
let hash = this.hash;
let commentbox = $('textarea[name=body]');
$('html, body').animate({
'scrollTop': commentbox.offset().top
}, 900, 'swing', function() {
commentbox.focus();
window.location.hash = target;
});
}
});
});
Level 9
Try this. Just for prove of concept.
<div class="reply">
<a href="#reply" id="comment" class="comment-reply-link">reply</a>
</div>
<div style="height: 100vh; margin: 400 0 400 0;"></div>
<form class="comment-form" action="#" method="post">
<p class="comment-form-comment">
<textarea
id="reply-input"
name="body"
cols="45"
placeholder="comment ..."rows="5" ></textarea>
</p>
</form>
<script>
const reply = function (event) {
event.preventDefault();
document.querySelector('#reply-input').scrollIntoView({
behavior: 'smooth'
});
// this is a little cheat
setTimeout(() => document.querySelector('#reply-input').focus(), 200);
}
document.getElementById('comment').addEventListener('click', reply);
</script>
Please or to participate in this conversation.