로그인

검색

Extra Form
추천지수 6

제가 사용하는 레이아웃과 게시판 스킨이 본문을 열람할때 상단의 헤더가 유지되는 경우가 있습니다. 위젯 등에서 댓글을 클릭하고 이동을 하게 되면 해당 댓글이 상단에 위치해서 바로 선택한 댓글을 바로 확인 할 수 있습니다. 그런데 헤더가 가리는 경우는 다시 스크롤을 조정해야 하는 불편이 생기는데요.

 

이를 스크립트로 한번 위치를 재조정해 보았습니다.

 

화면 캡처 2021-09-18 130917.png.jpg

 

 

위젯에서 댓글 링크를 클릭했지만 본문을 출력하는 곳에서 헤더가 가려버립니다.

 

 

 

 

스크립트를 댓글을 출력하는 파일에 추가해 주었습니다.

참고로 저는 modules/board/skins/rx-flextagram/components/comment/comment.html

 

이 파일의 하단에 추가를 해 주었습니다. 위 flextagram 의 문제를 해결하기 위해서 입니다.

 

 

 

<script>
$(document).ready(function(){
var s = decodeURIComponent(location.href).replace(/.*#comment_/,'');
if(!s || s === decodeURIComponent(location.href)) return;
s = '#comment_' + s;
target = $(s);
var position = target.offset().top - 80;
$("html, body").animate({ scrollTop: position }, 100);

 

$('a[href*="#comment_"]').click(function(){
var t = $(this).attr("href").replace(/.*#comment_/,'');
t = '#comment_' + t;
target = $(t);
var position = target.offset().top - 80;
$("html, body").animate({ scrollTop: position }, 100);
});
});
</script>

 

비슷한 코드가 두번 등장하는 이유는 위젯에서 처음 클릭해서 해당 문서 열람 페이지로 이동할때 작동을 해서 클릭한 댓글의 위치를 잘 보이게 조정을 해주었는데 이때 다시 한번 위젯에서 다시 클릭하게 되면 작동을 하지 않아서 아래 코드를 추가했습니다.

 

아래 코드는 클릭을 감지해서 작동하는 방식의 추가적인 작업을 추가해 준 것입니다. 이렇게 해서 언제 클릭하더라도 위치 조정이 되게 했습니다.

제가 클라이언트 언어에 깊숙히 잘 알지 못해서 코드를 작성해서 시연해 보고 안되는 부분은 그냥 추가한 것이니 더 좋은 방법이 있을 수도 있습니다.

 

위 코드에 등장하는 80 은 헤더의 높이에 따라 조정해서 사용해야 하고, 100의 경우는 스크롤 되는 속도를 조정할 수 있습니다.

 

url에서 선택한 댓글의 id를 추출하하는 코드는 알림센터에서 사용하는  js에서 그대로 차용했습니다.

 

 

 

 

화면 캡처 2021-09-18 130951.png.jpg

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
3 추천
Atachment
첨부 '0'

라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. 라이믹스 읽지 않은 쪽지(새쪽지) 표시해 주기 7

    Date2022.05.01 Category기능 Views1070 Votes4
    Read More
  5. Read More
  6. 라이믹스 게시판 목록에서 문서의 태그 출력해 주기 10

    Date2022.01.30 Category기능 Views2905 Votes6
    Read More
  7. Read More
  8. 라이믹스 설문조사 비회원참여를 막는 방법 2

    Date2021.12.05 Category기능 Views334 Votes3
    Read More
  9. 쿠키를 이용한 목록 스타일 변경 제공하기 1

    Date2021.11.20 Category기능 Views341 Votes5
    Read More
  10. Read More
  11. Read More
  12. 현재 읽고 있는 글의 목록 위치로 바로 가기 만들기 6

    Date2021.10.28 Category기능 Views337 Votes3
    Read More
  13. Read More
  14. Read More
  15. Read More
  16. Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. Read More
  22. Read More
Prev 1 2 3 4 Next
/ 4