여러개의 스크롤이벤트 사용시
원페이지 랜딩페이지를 구현할때
상단 menu와 사이드 navigation을 각 section별로 걸어 부드럽게 내려가는 스크롤
2번째 section부터 top버튼이 생성되어 클릭시 최상단으로 스크롤되는 효과
html
<body>
<header id="header">
<div class="header">
<h1 class="logo"><a href="index.html"><img src="static/imgs/logo.png" alt="로고"></a></h1>
<nav class="gnb">
<ul>
<li><a href="#section1">About</a></li>
<li><a href="#section2">Portfolio</a></li>
<li><a href="#section3">Technology</a></li>
<li><a href="#section4">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<!-- page_control -->
<nav id="page_control">
<div class="dots_wrap">
<a class="dot active" href="#section1"><span class="blind">About</span></a>
<a class="dot" href="#section2"><span class="blind">Portfolio</span></a>
<a class="dot" href="#section3"><span class="blind">Technology</span></a>
<a class="dot" href="#section4"><span class="blind">Contact Us</span></a>
</div>
</nav>
<!-- //page_control -->
<div id="topBtn">
<p class="top_btn">
<a href="#top"><i class="up"></i><span>top</span></a>
</p>
</div>
<div id="container">
<section id="section1">
<div class="section_header">
<h3>section1</h3>
</div>
<div class="section_body"> section1 </div>
</section>
<section id="section2">
<div class="section_header">
<h3>section2</h3>
</div>
<div class="section_body">section2 </div>
</section>
<section id="section3">
<div class="section_header">
<h3>section3</h3>
</div>
<div class="section_body">section3</div>
</section>
<section id="section4">
<div class="section_header">
<h3>section4</h3>
</div>
<div class="section_body">section4</div>
</section>
</div>
</body>
style
<style>
#topBtn{
display: none; position: fixed; right: 6.474%; z-index: 40; width: 40px; height: 40px; bottom: 4.5%; font-size: 12px; text-align: center; vertical-align: middle; text-transform: uppercase; border-radius: 50%; border:1px solid rgb(225,225,225);
}
.top_btn{ margin-top: 3px;}
.top_btn i{display: inline-block; text-align: center; border: solid #fff; border-width: 0 1px 1px 0; padding: 3.5px;}
.top_btn i.up{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}
.top_btn span{display: block;}
</style>
script
<script>
$(document).ready(function () {
// scroll
var speed = 700;
function scrolling(obj) {
if (!obj) {
$('html, body').animate({ scrollTop: 0 }, speed);
} else {
var posTop = $(obj).offset().top;
$('html, body').animate({ scrollTop: posTop }, speed)
}
};
// menu link
$('.gnb ul li a').click(function () {
var direction = $(this).attr("href");
scrolling(direction);
moveSection($(this).parent().index()+1);
});
$(".dots_wrap a").click(function () {
var direction = $(this).attr("href");
scrolling(direction);
moveSection($(this).index()+1);
});
/* 스크롤 모션 */
setGrid('.section_body');
function setGrid(target) {
var $win = $(window),
$target = $(target);
var scrollMotion = function () {
var scrollTop = $win.scrollTop(),
winH = $win.height();
$target.each(function (i) {
var $this = $(this),
position = this.getBoundingClientRect().top; // 요소의 크기와 요소의 viewport에서의 상대적인 위치를 반환
if (position < winH) {
$this.addClass('show');
} else {
$this.removeClass('show');
}
});
};
scrollMotion();
$(window).on('scroll', scrollMotion);
}
var currentPage = 1;
// scroll mousewheel
var moveTop = null;
$(".section").each(function () {
// 개별적으로 Wheel 이벤트 적용
$(this).on("mousewheel DOMMouseScroll", function (e) {
e.preventDefault();
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
} else if (event.detail) delta = -event.detail / 3;
// 마우스휠을 위에서 아래로
if (delta < 0) {
if ($(this).next() != undefined) {
moveTop = $(this).next().offset().top; //타겟의 다음 좌표의
}
// 마우스휠을 아래에서 위로
} else {
if ($(this).prev() != undefined) {
moveTop = $(this).prev().offset().top;
}
}
// 화면 이동 0.8초(800)
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 1000, complete: function () {
moveSection();
}
});
});
});
function moveSection(idx){
if(moveTop == $('#section1').offset().top || idx==1){
$('.gnb ul li').removeClass('active');
$('.gnb ul li:nth-child(1)').addClass('active')
$('.dots_wrap a').removeClass('active');
$('.dots_wrap a:nth-child(1)').addClass('active');
}else if(moveTop == $('#section2').offset().top || idx==2){
$('.gnb ul li').removeClass('active');
$('.gnb ul li:nth-child(2)').addClass('active')
$('.dots_wrap a').removeClass('active');
$('.dots_wrap a:nth-child(2)').addClass('active');
}else if(moveTop == $('#section3').offset().top || idx==3){
$('.gnb ul li').removeClass('active');
$('.gnb ul li:nth-child(3)').addClass('active')
$('.dots_wrap a').removeClass('active');
$('.dots_wrap a:nth-child(3)').addClass('active');
}else if(moveTop == $('#section4').offset().top || idx==4){
$('.gnb ul li').removeClass('active');
$('.gnb ul li:nth-child(4)').addClass('active')
$('.dots_wrap a').removeClass('active');
$('.dots_wrap a:nth-child(4)').addClass('active');
}
}
// tab JS
$('ul.tab>li').click(function () {
var activeTab = $(this).attr('data-tab');
$('ul.tab>li').removeClass('current');
$('.tab_content').removeClass('current');
$(this).addClass('current');
$('#' + activeTab).addClass('current');
})
});
</script><script>
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#topBtn').fadeIn();
} else {
$('#topBtn').fadeOut();
}
});
$("#topBtn").click(function() {
$('html, body').animate({
scrollTop : 0
}, 400);
return false;
});
</script>http://www.gisdeveloper.co.kr/?p=2122
반응형
'UXUI Development > Javascript' 카테고리의 다른 글
| API 문서 자동화 도구 (0) | 2021.12.14 |
|---|---|
| javascript 동적로딩 (0) | 2019.06.12 |
| script 내에 script호출 (0) | 2019.06.12 |
| html안에 html 로드 스크립트 분기처리 (0) | 2019.06.12 |
| 자바스크립트 (0) | 2019.05.29 |
| 날짜 분기 스크립트 (0) | 2019.05.29 |
| iframe/ContentDocument 프로퍼티 (+삼항연산자) (0) | 2019.04.04 |
| Ajax(Asynchronous Javascript And XML) (0) | 2018.03.27 |