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