카테고리

티스토리 뷰

유용한 정보

초간단 맨 위로(Top) 버튼 만들기(텍스트/이미지 가능)

【라일락】 2016.11.20 02:41


본문을 읽다 보면 스크롤바가 한참 내려 갈때 다시 올리려면 불편 합니다. 홈페이지나 블로그 오른쪽 아래에 맨 위로 버튼을 만들어 놓으면 무척이나 편합니다. 간단히 만드는 방법에 대해 알아 봅시다. (마우스 오른쪽 버튼 사용 하여 복사 가능)


아주 쉽습니다. 아래 소스를 HTML에 넣어 주시면 됩니다. (텍스트 소스) 


<a style="display:scroll;position:fixed;bottom:10px;right:10px;" href="#" title=”맨 위로">맨 위로</a> 




위 모습은 간단히 텍스트로 만들어 본것이고  

아래는 이쁘게 이미지로 만든 겁니다.




이미지 버튼 소스는 아래와 같습니다. 

맨위로에서 <img src="이미지 주소">만 바꾸면 됩니다.


<a style="display:scroll;position:fixed;bottom:10px;right:10px;" href="#" title=”맨위로"><img src="이미지 주소"></a>



위치 조절 하려면 bottom:10px;right:10px 에서 bottom:10px 은 아래에서 값 만큼 띄워 주는 것이고  right:10px 은 오른쪽에서 왼쪽으로 값만큼 띄어 주는 것입니다. 취향대로 바꾸어 주시면 됩니다.


소스 삽입 위치는 html의 제일 아래에서 바로 위에 넣어 주시면 됩니다.




아래 맨위로(Top) 이미지 모음이 있으니 취향대로 골라서 캡처 하여 사용 하시기 바랍니다.



조금이나마 도움이 되었나요?  좋은 하루 되세요.~


저작자표시
공유하기 링크
TAG
, , , , ,
댓글
댓글쓰기 폼