댓글 삭제 후 스크롤이 맨 위로 올라가는 문제
본문
다음 사진에서 보시다시피 댓글 삭제 후 스크롤이 맨 위로 올라갑니다.
댓글 삭제 후에 스크롤 위치를 그대로 유지시키려면 어떻게 수정을 해야할까요?
그누보드 데모 사이트: https://demo.sir.kr/gnuboard5/?device=mobile
<script>
var save_before = '';
var save_html = document.getElementById('bo_vc_w').innerHTML;
function good_and_write()
{
var f = document.fviewcomment;
if (fviewcomment_submit(f)) {
f.is_good.value = 1;
f.submit();
} else {
f.is_good.value = 0;
}
}
function fviewcomment_submit(f)
{
var pattern = /(^\s*)|(\s*$)/g; // \s 공백 문자
f.is_good.value = 0;
/*
var s;
if (s = word_filter_check(document.getElementById('wr_content').value))
{
alert("내용에 금지단어('"+s+"')가 포함되어있습니다");
document.getElementById('wr_content').focus();
return false;
}
*/
var subject = "";
var content = "";
$.ajax({
url: g5_bbs_url+"/ajax.filter.php",
type: "POST",
data: {
"subject": "",
"content": f.wr_content.value
},
dataType: "json",
async: false,
cache: false,
success: function(data, textStatus) {
subject = data.subject;
content = data.content;
}
});
if (content) {
alert("내용에 금지단어('"+content+"')가 포함되어있습니다");
f.wr_content.focus();
return false;
}
// 양쪽 공백 없애기
var pattern = /(^\s*)|(\s*$)/g; // \s 공백 문자
document.getElementById('wr_content').value = document.getElementById('wr_content').value.replace(pattern, "");
if (char_min > 0 || char_max > 0)
{
check_byte('wr_content', 'char_count');
var cnt = parseInt(document.getElementById('char_count').innerHTML);
if (char_min > 0 && char_min > cnt)
{
alert("댓글은 "+char_min+"글자 이상 쓰셔야 합니다.");
return false;
} else if (char_max > 0 && char_max < cnt)
{
alert("댓글은 "+char_max+"글자 이하로 쓰셔야 합니다.");
return false;
}
}
else if (!document.getElementById('wr_content').value)
{
alert("댓글을 입력하여 주십시오.");
return false;
}
if (typeof(f.wr_name) != 'undefined')
{
f.wr_name.value = f.wr_name.value.replace(pattern, "");
if (f.wr_name.value == '')
{
alert('이름이 입력되지 않았습니다.');
f.wr_name.focus();
return false;
}
}
if (typeof(f.wr_password) != 'undefined')
{
f.wr_password.value = f.wr_password.value.replace(pattern, "");
if (f.wr_password.value == '')
{
alert('비밀번호가 입력되지 않았습니다.');
f.wr_password.focus();
return false;
}
}
<?php if($is_guest) echo chk_captcha_js(); ?>
set_comment_token(f);
document.getElementById("btn_submit").disabled = "disabled";
return true;
}
function comment_box(comment_id, work)
{
var el_id,
form_el = 'fviewcomment',
respond = document.getElementById(form_el);
// 댓글 아이디가 넘어오면 답변, 수정
if (comment_id)
{
if (work == 'c')
el_id = 'reply_' + comment_id;
else
el_id = 'edit_' + comment_id;
}
else
el_id = 'bo_vc_w';
if (save_before != el_id)
{
if (save_before)
{
document.getElementById(save_before).style.display = 'none';
}
document.getElementById(el_id).style.display = '';
document.getElementById(el_id).appendChild(respond);
//입력값 초기화
document.getElementById('wr_content').value = '';
// 댓글 수정
if (work == 'cu')
{
document.getElementById('wr_content').value = document.getElementById('save_comment_' + comment_id).value;
if (typeof char_count != 'undefined')
check_byte('wr_content', 'char_count');
if (document.getElementById('secret_comment_'+comment_id).value)
document.getElementById('wr_secret').checked = true;
else
document.getElementById('wr_secret').checked = false;
}
document.getElementById('comment_id').value = comment_id;
document.getElementById('w').value = work;
if(save_before)
$("#captcha_reload").trigger("click");
save_before = el_id;
}
}
function comment_delete()
{
return confirm("이 댓글을 삭제하시겠습니까?");
}
comment_box('', 'c'); // 댓글 입력폼이 보이도록 처리하기위해서 추가 (root님)
<?php if($board['bo_use_sns'] && ($config['cf_facebook_appid'] || $config['cf_twitter_key'])) { ?>
$(function() {
// sns 등록
$("#bo_vc_send_sns").load(
"<?php echo G5_SNS_URL; ?>/view_comment_write.sns.skin.php?bo_table=<?php echo $bo_table; ?>",
function() {
save_html = document.getElementById('bo_vc_w').innerHTML;
}
);
});
<?php } ?>
$(function() {
//댓글열기
$(".cmt_btn").click(function(){
$(this).toggleClass("cmt_btn_op");
$("#bo_vc").toggle();
});
});
</script>
위 스크립트 중에 하나를 수정하면 될 거 같은데 어느 부분을 어떻게 수정해야될지를 모르겠네요 ㅠㅠ
!-->답변 5
위로 올라가는게 아니라 댓글 삭제 후 페이지가 새로고침 되는거라 불가합니다.
기타 다른 방법으로는 비동기식(ajax) 로 처리하는방법과 댓글 삭제 후 해당 스크롤 위치를 기억해서 다시 내리는 방법이 있는데 그렇게 추천드리진 않습니다.
간단히 두 가지를 추가하세요
1. bbs/delete_comment.php 맨 마지막 코드 수정
goto_url(short_url_clean(G5_HTTP_BBS_URL.'/board.php?wk=D&bo_table~~~ //wk
2. view_comment 스킨 맨 마지막 자바스크립트에 추기
<?php if(isset($wk)) {?>$("html, body").animate({scrollTop: $(".cmt_btn").offset().top }, 10); <?php } ?>
10<==500, 1000 바꿔가며 해보세요. 스르륵~~~ 됩니다
삭제 후 바로위의 댓글로 이동하는 것도 가능하지만 복잡해지겠으므로 그냥 댓글 처음으로 이동
일단은 그냥은 불가능합니다.
페이지 전환이 이루어진 다음 화면에 보여지기 때문에
마치 맨 위로 올라가는 것 처럼 보일 뿐 실제로는 페이지가 완전히 새로고침 되는 형태입니다.
https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&wr_id=4687&c_4698
여기에서 삭제 이후 주소가 완전히 바뀝니다.
해당 주소를 ajax로 전송하셔서 댓글 화면만 재 갱신 하셔야 합니다.
비동기식으로 작업하셔야 해요.
그누보드 자체 구조 및 PHP 만으로는 작업할 수 없습니다.
ajax 등을 사용하여 비동기 형태로 작업해야 합니다.
작업하기 어려우시다면 제작의뢰 또는
https://open.kakao.com/o/saLedtzg
오픈채팅으로 문의 주시면 안내해드리겠습니다^^