인터넷 IT/블로그팁

대전 블로그 중급자팁# 한방에 상단이동

나눌맨 2017. 6. 16. 13:08

속도의 문제입니다. 요즘은 너무 빨리빨리 라는 부분이 필요한 세상인듯 합니다.

그래서 블로그 역시 빠른 로딩과 핵심을 빨리 전달하는 것이 중요한듯 합니다.

그래서 여러가지 툴을 티스토리 블로그 속에 담는 것이 어렵습니다.

그런데 오늘 이야기하는 부분은 정말 작은 부분입니다.

크게 블로그에 영향을 주지 않으면서도 내 블로그 에서 빠르게 상단이동을 할수 있으니 방문자에게도 필요한 부분이기도 하죠.

바로 한번 클릭으로 최상단으로 이동.

대전 블로그 중급자팁# 한방에 상단이동

블로그 중급자팁 이라고 말씀드렸지만, 대전 블로그 처음 입문하는 분도 쉽게 따라해 볼수 있는 부분입니다.

화일 하나와 html 부분에 작게 하나 추가하면 되는 부분이죠.

우선 제 블로그 우측 하단에 보면 아무것도 없을 것입니다.

그런데 글을 아래로 쭉 내려보면 우측 하단에 위쪽의 화살표 표시 하나가 뜰것입니다.

그것을 누르면 바로 한방에 상단이동이 되죠.

준비물.

화살표 이미지

참 간단하죠.

이미지 만들기 귀찮은 분은 제 화면 캡쳐하여서 오려서 사용하셔도 좋습니다.

이미지가 만들어 졌다면 블로그관리 들어가셔서 꾸미기 부분의 html/css편집 부분으로 들어가 보세요.

세번째에 파일올리기 부분이 있습니다.

그곳에 화일을 올려주시면 됩니다.

이때 화일명은 잘 기억해야 겠죠. 화일명을 기억못할 경우에는 이미지부분에서 마우스 우측 눌러서 속성 보면 나옵니다. 저는 편의상 top2 라고 명명하여 보았습니다.

자, 이제 화일은 만들어 졌으니 코드를 넣어야 겠죠.

html 어렵다고 하는분이 많은데 뭐 그리 어려울 것이 없는 부분입니다.

상단이동 부분은 html 중간 부분 이런 복잡함이 없이 그냥 맨 아래에 삽입하면 되니까요.

/body 바로 위에 올려놓으면 됩니다.

한방에 상단이동 스크립트

일단 원문부터 올려 놓습니다. ( /body 바로 위에 넣어주시면 됩니다. )

</script>
<script type="text/javascript">
$(function(){
$("#gotop").hide();
$(window).scroll(function(){
if($(this).scrollTop() > 100){$("#gotop").fadeIn();}
else{$("#gotop").fadeOut();}
});
});
</script>
<a href="#" id="gotop" style="display:none;position:fixed;bottom:10px;right:10px;z-index:99999999" title="Top"><img src="./images/top2.png" border="0"/></a>
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'ko'}
</script>

gotop.txt