댓글 삭제 후 스크롤이 맨 위로 올라가는 문제

댓글 삭제 후 스크롤이 맨 위로 올라가는 문제

QA

댓글 삭제 후 스크롤이 맨 위로 올라가는 문제

답변 5

본문

다음 사진에서 보시다시피 댓글 삭제 후 스크롤이 맨 위로 올라갑니다.

 

댓글 삭제 후에 스크롤 위치를 그대로 유지시키려면 어떻게 수정을 해야할까요?

 

2009096195_1720745597.5169.gif

 

 

그누보드 데모 사이트: 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

 

여기에서 삭제 이후 주소가 완전히 바뀝니다. 

 

978180634_1720746522.2308.png

 

해당 주소를 ajax로 전송하셔서 댓글 화면만 재 갱신 하셔야 합니다.

 

그누보드 자체 구조 및 PHP 만으로는 작업할 수 없습니다.

 

ajax 등을 사용하여 비동기 형태로 작업해야 합니다.

작업하기 어려우시다면 제작의뢰 또는

https://open.kakao.com/o/saLedtzg

오픈채팅으로 문의 주시면 안내해드리겠습니다^^

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 674
© SIRSOFT
현재 페이지 제일 처음으로