jQuery slide scroll, quicktop, tab
2021. 12. 10. 13:16ㆍStudy/jQuery
스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵 스르륵
JS
$(document).ready(function () {
$('.content .topMove').hide();
$(window).on('scroll',function(){ // 스크롤 값의 변화가 생기면
var scroll = $(window).scrollTop(); // 스크롤의 거리
$('.text').text(scroll);
if(scroll>500){ // 500 이상의 거리가 발생되면
$('.content .topMove').fadeIn('slow'); // top 보여라
} else {
$('.content .topMove').fadeOut('fast'); // top 감춰라
}
});
$('.content .topMove').click(function(e){
e.preventDefault(); // href=# 방지
$("html,body").stop().animate({"scrollTop":0},1000);//상단으로 스르륵 이동합니다.
});
// 슬라이드 메뉴 클릭 시 해당 콘텐츠로 스르륵 이동
$('.slideMenu a').click(function(e){
e.preventDefault(); // href=# 방지
var value=0; // 이동 할 스크롤의 거리 값
if($(this).hasClass('link1')){ // is('.link1')
value= $('.content section:eq(0)').offset().top; // offset().top; 거리값의 상단 : con1 의 스크롤 값
}else if($(this).hasClass('link2')){
value= $('.content section:eq(1)').offset().top;
}else if($(this).hasClass('link3')){
value= $('.content section:eq(2)').offset().top;
}else if($(this).hasClass('link4')){
value= $('.content section:eq(3)').offset().top;
}
// value의 위치로 움직여라
$("html,body").stop().animate({"scrollTop":value},1000);
});
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0; padding: 0}
a{color: #333; text-decoration: none}
.wrap{width: 1000px; margin: 0 auto; border: 1px solid red}
header{height: 100px; background: #f00}
.main{height: 150px; background: #0f0}
.content{}
.content section{height: 1000px; background: #00f; margin-bottom: 10px}
.content .topMove{display:block; width: 30px; height: 30px; background: #f00; border-radius: 15px; position: fixed; left:50%; margin-left: 470px; bottom:130px;}
footer{height: 100px; background: #ccc}
.text{position: fixed; right: 0; top:0; ont-size: 30px}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/slide_move.js"></script>
</head>
<body>
<div class="wrap">
<header>헤더영역</header>
<div class="main">비주얼영역</div>
<article class="content">
<nav class="slideMenu">
<ul>
<li><a class="link1" href="#">메뉴1</a></li>
<li><a class="link2" href="#">메뉴2</a></li>
<li><a class="link3" href="#">메뉴3</a></li>
<li><a class="link4" href="#">메뉴4</a></li>
</ul>
</nav>
<section class="con1">본문1</section>
<section class="con2">본문2</section>
<section class="con3">본문3</section>
<section class="con4">본문4</section>
<a class="topMove" href="javascript:void(0);">top</a>
</article>
<footer>하단푸터영역</footer>
</div>
<div class="text">0</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery main slide (0) | 2021.12.13 |
|---|---|
| jQuery main slide - fade (0) | 2021.12.13 |
| jQuery 네비게이션 Full drop-down + 스크롤 반응 배경 (0) | 2021.12.09 |
| jQuery 네비게이션 full dropdown_navi (0) | 2021.12.09 |
| jQuery 네비게이션3 (0) | 2021.12.09 |
