가우르 구라 스크롤 top 버튼

 

<a id="BackToTop" href="#" title="위로 가기">
<img src="" alt="위로 가기" />
</a>
</div>

<script>
jQuery(function($) {
    var images = [
        './images/maste.webp',
        './images/이미지주소',
        './images/이미지주소'
    ];

    var randomImage = images[Math.floor(Math.random() * images.length)];

    $('#BackToTop img').attr('src', randomImage);

    $('#BackToTop').click(function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: 0 }, '500');
    });
});
</script>

css --부분 
#BackToTop {
    bottom: 0;
    right: 0;
    position: fixed;
    opacity: 0.5; 투명도
    transition: all .5s;
    cursor: pointer;
    transform: scale(.5, .5); -이미지 사이즈
    transform-origin: right bottom;
    display: none; 
	z-index: 1;
}

@media (min-width: 1000px) {
    #BackToTop {
        display: block;
    }
}

#BackToTop:hover { 마우스오버레이
    opacity: 1;
}

 

오늘도 웹 서핑을 하다가 귀여운 코드를 발견했네요.

원본 : https://github.com/xiamuguizhi/Typecho-BackToTop/tree/master

GitHub - xiamuguizhi/Typecho-BackToTop: 简单 轻量级typecho返回顶部插件

 

티스토리에 맞게 수정했습니다.
반응형 부분은 스킨에 맞게 수정해서 사용해 주세요. 기본적으로 1000px 아래로는 안 보이게 됩니다.

코드.7z

0.04MB