혹시 이런 소스 소장하고 계시분 계신가요?
본문
질문란에 소스요청해서 죄송합니다만.
혹시 아래 사이트의 우측에 있는 화살표가 항상 화면의 하단에 위치해있고 클릭하면 위로 올라가는 방식의 소스 가지고 계신분 있으신가요?
답변 1
좀더 자신에 맞는 기능을 구현하고 싶으시면 플러그인을 찾아 적용시키거나
참고해서 작업하시면 됩니다
-html-
<div class="scrollUp" onclick="javascript:scrollUp();">topimg</div>
--css--
.scrollUp { display: none; position: fixed; right: 10%; bottom: 80px; padding: 10px 11px; font-size: 13px; line-height: 100%; text-align: center; color: #fff; background-color: #222; border-radius: 3px; z-index: 10000; cursor: pointer; -webkit-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; } .scrollUp:hover { background-color: #555; }
--script--
var scrollUpDelay = 1;
var scrollUpSpeed = 30;
function scrollUp()
{
if(document.body.scrollTop<1)
{
return;
}
document.body.scrollTop=document.body.scrollTop-scrollUpSpeed; setTimeout('scrollUp()',scrollUpDelay);
}
$(document).ready(function() {
$(window).scroll(function() {
if($(document).scrollTop() > 300) {
$('.scrollUp').fadeIn();
} else {
$('.scrollUp').fadeOut();
};
});
});