빈응형 페이지 업다운 스크롤 애니메이션 버튼 달기

티스토리 블로그 스킨에 페이지 업다운 버튼달기

 

내 블로그 글들은 다 스크롤 압박이 심해서

위로 올라가기 아래로 내려가기 버튼은 필수더라

자바스크립트나 html에 대해서 몰랐을때는

능력자들 포스팅 보고 따라해놨었는데

이젠 조금 알기도 하니까 얼마전에

연습삼아 해보고 완성했다!

 

그냥 업다운 기능만 있다가

나무위키처럼 애니메이션 버튼으로 함 ㅋㅋ

 

 

현재 사용중인 티스토리 반응형 #1 스킨을 편집~

 

다운받은 up arrow / down arrow 를

색상,크기편집해서 파일업로드에 추가해준다.

처음에 64 x 64 짜리로 받은거 같은데 어째

편집후에 크기가 실제 아이콘은 더 작고

뒤에 투명한 박스가 72 x 72로 사용중이더라.

 

 

HTML: 메뉴에 들어가서 스크립트와

태그를 입력해주고 저장을 눌러 새로고침~

 

<butten>에 아이콘이미지를 넣은 형태로

마우스를 올렸을떄 손가락 모양으로 커서가

바뀔 수 있도록 스타일에 cursor:pointer를

넣었다. 버튼말고 <a>를 사용하면 쓸필요가

없지만 그냥 버튼태그 씀

 

아이콘의 위치가 바뀌지 않도록 position:fixed;

다른 이미지에 가려지지 않도록 z-index:엄청높게;

Top버튼이 아래에서 60px, 오른쪽에서 10px

떨어져서 있도록 위치를 잡아준다.

title은 마우스를 올렸을때 이미지의 설명이 보이는거..

<img>의 주소를 파일업로드에 추가한 이름에 맞게

해주고 테두리가 안보이도록 border=0

 

스크립트 영역에선 제이쿼리 스크롤 애니메이션

이벤트를 넣어준다. Top버튼에 클릭시 위치를

scrollTop:0을 하면 최상단으로 올라간다.

속도설정은 700으로 해서 스르륵~

Bottom버튼은 눌렀을 때 위에 설정해놓은

<div id="pageBottom"> 위치로 가도록 한다.

 

요러면 이게 적용된 화면이다.

헌데 아이콘의 크기가 pc버전이랑

똑같으니, 모바일 화면을 너무 가린다는

단점이 있다. 실제로 반응형 스킨도 메뉴

아이콘이 모바일일때와 pc일때가 모양이 다르다.

 

CSS 메뉴에서 media 쿼리를 사용해서

max-width:414px 화면너비가 414px 이하

일때 버튼크기와 위치를 변경해주었다.

img의 width를 본래크기말고 60px로 바꿔주니

그에맞춰서 높이도 변경되어 사이즈가 줄었다.

줄어든 사이즈에 따라 버든사이의 간격도

줄여줄 필요가 있어서 Top버튼의 height를

58px으로 옮겨줬다.

 

 

그러면 이렇게 모바일화면일때 아이콘

크기가 줄어들게 된다.

 

실제 폰에서 캡쳐찍었을때~

이렇게 페이지 스크롤버튼을 달아놨다.

나중에는 시간을 더 들여서 다른

능력자님들 처럼 예쁜 티스토리 블로그로

꾸미고 싶다!