top버튼 그리고 카톡버튼

숙취해소

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-09-15 (목) 17:27:36 2,206

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

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

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

이런 설명은 없더라구요

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

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

top버튼 카톡 top

답변 5개 / 댓글 2개

채택된 답변

+20 포인트

균이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-09-15 (목) 22:14:41

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

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

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

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

~~~

</div>

~~~

<style>

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

</style>

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

답변에 대한 댓글 1개

숙취해소

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-09-16 (금) 15:25:18

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

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

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

균이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-09-17 (토) 01:44:04

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

Copy

<div id='top_btn_kakao'>
    <div><br>카카오</br></div>

    <button type="button" id="top_btn">
     <i class="fa fa-arrow-up" aria-hidden="true"></i><span class="sound_only">상단으로</span>
    </button>
  </div>
    <script>
    $(function() {
        $("#top_btn").on("click", function() {
            $("html, body").animate({scrollTop:0}, '500');
            return false;
        });
    });
    </script>
  <style>
#top_btn_kakao {position: fixed;bottom: 100px;right: 20px;width:50px;height: 100px; border: 2px solid blue; z-index: 999;}
 </style>

sinbi

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-09-15 (목) 22:05:42

그누보드 기준.

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

Copy

<button type="button" id="top_btn">
    <i class="fa fa-arrow-up" aria-hidden="true"></i><span class="sound_only">상단으로</span>
</button>
<script>
$(function() {
    $("#top_btn").on("click", function() {
        $("html, body").animate({scrollTop:0}, '500');
        return false;
    });
});
</script>

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