material T 강좌 - toBottom 맨 아래로 가는 버튼 만들기

반응형

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;

  }

}

반응형

저작자표시비영리동일조건