간단하게 만들어 보았고,
이미지는 다음과 같습니다.
이미지는 SVG REPO에서 다운받았습니다.
저는 svg를 사용했는데 png를 사용하셔도 됩니다.(저는 선 표현력이 svg가 더 좋다고 알고 있어서 사용했습니다.)
arrow-footer.svg
0.00MB
arrow-top.svg
0.00MB
스킨편집 - HTML코드 수정을 하시면 됩니다.
Script
<script>와 </script> 사이에 아무대나 작성하시면 됩니다. (저는 </script> 윗줄에 작성하였습니다.)
goToHeader와 goToFooter라는 함수를 추가해주었습니다.
// 맨 위로
function goToHeader() {
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
// 맨 아래로
function goToFooter() {
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth'
})
}
HTML
<body>와 </body> 사이에 아무대나 넣어주시면 됩니다. (저는 맨 하단 </body> 전에 넣었습니다.)
html코드는 다음과 같이 해놓았습니다.
css로 따로 빼주고 싶엇지만 나중에 스킨을 또 변경하면 저 상태인게 그대로 옮기기 편할거 같아서 저렇게 넣어놨습니다.
<a href="javascript:goToHeader()" id="goTop" style="position:fixed; bottom:120px; right:45px; z-index:99999999;" title="맨위로">
<img src="./images/arrow-top.svg" border="0" width="35" height="35"/>
</a>
<a href="javascript:goToFooter()" id="goFooter" style="position:fixed; bottom:120px; right:10px; z-index:99999999;" title="맨아래로">
<img src="./images/arrow-footer.svg" border="0" width="35" height="35"/>
</a>
CSS
css 맨 하단에 다음과 같이 추가하여
마우스를 올렸을떄(hover시) 투명가 변하도록 하였습니다.
#goTop:hover,
#goFooter:hover{
opacity: 0.4;
}반응형
'잡학' 카테고리의 다른 글
| VSCode 글자 제한 세로 줄 긋기 (0) | 2022.07.05 |
|---|---|
| 버전의 LTS의 의미 (0) | 2022.05.27 |
| 현재 사용중인 것들의 Document 정리 (0) | 2022.04.06 |
| 개발 컴퓨터(MacOS, Vue.js, Node.js) 기초 세팅하기 메모 (0) | 2022.04.04 |
| 맥북 에어 M1칩(Apple Silicon) 초기화하기 ( + 한국어 설정하기) (0) | 2022.03.22 |
