티스토리 반응형#2 스크롤 TOP버튼 추가하기

 티스토리 반응형 #2 스킨 뜯어고치기~ 재미있군요.

오늘은 늘 신경이 쓰였던 TOP버튼의 추가하기입니다.

 

 

 

 

 글을 읽다 내려가다보면 다시 상단으로 가야하는데 PC에선 그렇게 불편함을 모르겠는데, 이게 모바일에선 상당히 불편시렵습니다.

그래서 오늘은 상단으로 이동하는, 그것도 스크롤효과가 있는 TOP버튼을 붙여봤습니다.

 

 

 

 

글 오른쪽 아래에 보시면 동그랗게 TOP버튼이 붙어있죠?

요런 작은게 있다 없으면 또 불편하죠~

 

 

 

 

특히나, 모바일에선 손가락으로 스크롤하는게 무척 힘이 듭니다;;

 

 

자~ 붙여볼까요?

 

 

 

일단,

버튼 이미지 만들기는 귀찮으니 그냥  HTML로 만들었습니다.

모양은 반응형#2 스킨의 아이콘 스타일대로 동그랗게 만들었습니다.

이미지를 사용하실 분은 요기에 배경이미지를 적용하시면 됩니다.

 

 

* 추가

구글배너나 기타 화면을 가리는 것을 해결해야 하는분은 

아래와 같이 z-index를 추가해주셔야합니다.

.go_top { z-index:9999;}

 

 

 

 

 

 

그리고 적당한 HTML상의 위치에 위와 같이 소스를 적습니다.

일단 클래스명은 TOP으로 적어두었습니다. 이름은 변경하셔도 상관없습니다.

단, 아래 스크립트에서도 함께 이름을 맞춰주셔야 한다는거 잊으시면 안돼요~

 

 

 

 

그냥 상단으로 보내면 되는건데 뭔 스크립트지? 하시겠지만...

 

그냥 심심한 버튼을 넣기가 그래서 스르륵 스크롤되면서 올라가는 효과를 추가했습니다.

그것만 있느냐! 또 있습니다;

 

화면을 스크롤하지 않고 상단에 위치해 있으면 버튼이 숨어있다가

스크롤해서 아래로 내리다보면 슬쩍 나타나는 버튼,

그리고 위로 가면 스르륵 사라지는 버튼~

 

멋지죠?

 

잘 적용/응용하셔서 자신만의 스타일로 붙여보시길 바랍니다.

소스는 아래 텍스트파일로 첨부했습니다.

 

 

소스및스크립트.txt

 

 

스크롤버튼참조.html

 

 

 

 

 

무지 공감하신다면 공감버튼 꾸욱~!!!!