2026, 새로운 도약을 시작합니다.

top버튼 그리고 카톡버튼 채택완료

취미삼아 공부해보고 있는 왕초보입니다

홈페이지에 top버튼 또는 그 위에 카톡버튼을 만들어서 넣어보고 싶은데

아무리 검색해봐도 "어떤 특정파일에 이러이러한 소스를 넣어라"

이런 설명은 없더라구요

그리 간단한 문제가 아닌 난이도가 좀 있는 건지요?

그런거라면 일찌감치 포기 좀 하고싶어서요 ㅎㅎ;;

답변 5개

채택된 답변
+20 포인트

"어떤 특정파일에 이러이러한 소스를 넣어라" <---tail.php 하단에 보면 아래와 같은 코드가 있습니다

 <button type="button" id="top_btn"> 

~~

$("#top_btn").on("click", function() {

이부분을 수정해서 다음처럼 하세요

<div id='top_btn_kakao'>

 <div='kakao'>카카오링크</div>

 <button type="button" id="top_btn2">

~~~

~~~

</div>

<script>
    $(function() {
        $("#top_btn2").on("click", function() {

~~~

<style>

#top_btn_kakao {position: fixed;bottom: 100px;right: 20px;width:50px;height: 100px; border: 2px solid blue; z-index: 999;}

</style>

카카오링크와 top버튼 디자인

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

친절한 답변 너무 감사합니다

모바일 tail에는 말씀하신 문구가 있기는 한데 저 부분을 아래 말씀하신대로 어떻게 수정을 해야할지 감이 안오네요 ^^;;;;

염치불구하고 시간 남아도실때 한번만 더 상세한 설명해주시면 정말 감사하겠습니다

댓글을 작성하려면 로그인이 필요합니다.

야래 코드 복사헤서 사용하세요

Copy


   

    
카카오

    

     상단으로

    

  

    

    $(function() {

        $("#top_btn").on("click", function() {

            $("html, body").animate({scrollTop:0}, '500');

            return false;

        });

    });

    

  

#top_btn_kakao {position: fixed;bottom: 100px;right: 20px;width:50px;height: 100px; border: 2px solid blue; z-index: 999;}

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

그누보드 기준.

/theme/basic/tail.php 파일에 탑버튼 소스 있어요.

Copy




    상단으로





$(function() {

    $("#top_btn").on("click", function() {

        $("html, body").animate({scrollTop:0}, '500');

        return false;

    });

});



테마 안 파일들부터 하나씩 살펴보시면 공부에 도움됩니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

우선 단독 파일 하나만 예제 형식으로 만들어본 후

기능이 동작하면 원하는 위치에 필요한 부분만 가져다 붙힐수 있습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변에 대한 댓글 1개

덕분에 PC버전의 TOP아이콘은 만들어서 해결했습니다. 감사합니다
그 위에 카톡상담 아이콘만 현재 sir 홈피 우측 하단에 다크모드처럼 떠있도록 하면 좋을 것 같은데 쉬운 방법이 없을까요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고