material T 스킨에는 스크롤을 내렸을 때 맨 위로 다시 돌아오는 버튼이 오른쪽 아래에 나타나는데요,


    어떤 분이 맨아래로 가는 버튼도 있었으면 좋겠다 요청해주셔서 올립니다.


    material T mark 5.2까지 모든 버전에 적용 가능합니다.


    맨 아래로 버튼 만들기

    소개드릴 방식은 맨처음 화면 오른쪽 아래에는 맨 밑으로 버튼이 나타나고 스크롤을 내리면 맨위로 버튼이 나타나는 식입니다.


    아무래도 맨밑으로 버튼이 필요할 때는 스크롤을 하지 않은 처음 상태일 것이고, 맨 위로 버튼이 필요할 때는 이미 스크롤을 내린 뒤 일 것이기 때문입니다.


    중간에 버튼이 2개가 등장하는것은 디자인상 좋지 않다 생각하여 버튼 1개로 처리하는 방식을 택했습니다.





    먼저 html에서 <div id="toTop"을 찾아 바로 윗줄에 다음을 붙여넣습니다.

    <div id="toBottom" class="iconbutton ripplelink" onclick="$('body,html').animate({scrollTop:$('body').height()},150);"><i class="ic-keyboard_arrow_down"></i>

    </div>



    그리고 CSS 맨아래에 다음을 추가합니다.

    #toBottom {

        position: fixed;

        right: 16px;

        bottom: 16px;

        font-weight: bold;

        background: #ff4081;

        color: #fff;

        box-shadow: 2px 2px 6px 0.6px rgba(0,0,0,0.2);

        z-index: 9;

    }

    @media (min-width: 992px){

      #toBottom {

        width: 57px;

        height: 57px;

        line-height: 57px;

        font-size: 24px;

      }

    }




    저작자 표시 비영리 동일 조건 변경 허락
    신고
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 옹봉이
      2017.04.30 18:16 신고

      앗 ㅠ.ㅠ. 댓글을 쓴다는게 위에 '문제가 있나요?' 칸에 썼네요..

      정말 감사합니다!! 이렇게 빨리 올려주실줄은 몰랐어요~~
      저는 본문 중간을 보다가 아래로 내려가는 버튼을 사용하고 싶어서 버튼을 2개 써야하는데
      일단 toTop이랑 toBottom위치만 잡아주니 잘 되네요.

      그런데 toBottom도 toTop처럼 맨 위에서 감추려고 style="display:none;"을 넣었더니 아예 안보여서
      스크롤 이동시 보여주는 script에 대해 검색해보고 있는데 아직 초보라그런지 어렵네요.

      • BlogIcon 뭐하라
        2017.05.01 22:34 신고

        <script>
        $(window).scroll(function() {
        if ($(window).scrollTop() === 0) {
        $("#toTop").hide();
        } else {
        $("#toTop").show();
        }
        });
        </script>

        toTop 숨겼다 나타났다 하는 코드인데요 수정해서 html에 넣으시면될겁니다

    • BlogIcon 옹봉이
      2017.05.01 23:46 신고

      감사합니다~ 자꾸 번거롭게해드려서 너무 죄송하지만 혹시 넣는 위치가 따로 있나요? #toTop을 #toBottom으로 바꾸고 toBottom </div> 바로 아래에 넣었는데 안되네요.

    • BlogIcon 옹봉이
      2017.05.02 00:05 신고

      정말 감사합니다!! 위에서 두번째 줄 끝에 ] 부분 지우니까 되네요~


    • 2017.05.11 00:46

      비밀댓글입니다

      • BlogIcon 뭐하라
        2017.05.11 00:47 신고

        티스토리아이디이미있는분께는 초대장드리지않습니다


    • 2017.11.27 21:31

      비밀댓글입니다

      • BlogIcon 뭐하라
        2017.11.27 21:40 신고

        무슨말인지 잘 모르겠네요..


      • 2017.12.02 12:07

        비밀댓글입니다

티스토리 툴바