반응형

    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 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함