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;
}
}
2017.04.30 18:16 신고
앗 ㅠ.ㅠ. 댓글을 쓴다는게 위에 '문제가 있나요?' 칸에 썼네요..
정말 감사합니다!! 이렇게 빨리 올려주실줄은 몰랐어요~~
저는 본문 중간을 보다가 아래로 내려가는 버튼을 사용하고 싶어서 버튼을 2개 써야하는데
일단 toTop이랑 toBottom위치만 잡아주니 잘 되네요.
그런데 toBottom도 toTop처럼 맨 위에서 감추려고 style="display:none;"을 넣었더니 아예 안보여서
스크롤 이동시 보여주는 script에 대해 검색해보고 있는데 아직 초보라그런지 어렵네요.
2017.05.01 22:34 신고
<script>
$(window).scroll(function() {
if ($(window).scrollTop() === 0) {
$("#toTop").hide();
} else {
$("#toTop").show();
}
});
</script>
toTop 숨겼다 나타났다 하는 코드인데요 수정해서 html에 넣으시면될겁니다
2017.05.01 23:46 신고
감사합니다~ 자꾸 번거롭게해드려서 너무 죄송하지만 혹시 넣는 위치가 따로 있나요? #toTop을 #toBottom으로 바꾸고 toBottom </div> 바로 아래에 넣었는데 안되네요.
2017.05.01 23:48 신고
맨밑에 /body위에넣으시면됩니다
2017.05.02 00:05 신고
정말 감사합니다!! 위에서 두번째 줄 끝에 ] 부분 지우니까 되네요~
2017.05.02 00:07 신고
앗 오타가있었네요 다행입니다
2017.05.11 00:46
비밀댓글입니다
2017.05.11 00:47 신고
티스토리아이디이미있는분께는 초대장드리지않습니다
2017.11.27 21:31
비밀댓글입니다
2017.11.27 21:40 신고
무슨말인지 잘 모르겠네요..
2017.12.02 12:07
비밀댓글입니다