인프런 커뮤니티 질문&답변
작성한 질문수
슬라이딩 스크롤이 이상하게 먹혀요!
작성
·
253
1
■ 질문 남기실 때 꼭! 참고해주세요.
- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
html 아이디를 전부 따로 주었는데도 about이나 blog를 누르면 해당 섹션으로 이동하는게 아니라 자꾸 맨처음 지점으로 올라가게 됩니다! 스크립트와 html 중에 뭔가 문제가 있는건가요? 스크립트를 주기 전까지는 해당 섹션으로 잘 이동했었습니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- js 첫번째줄 필수-->
<script src="js/jquery-3.5.1.min.js"></script>
<!-- sliding jQuery -->
<script src="js/jquery.scrollTo.min.js"></script>
<script src="https://kit.fontawesome.com/a947f92a9e.js" crossorigin="anonymous"></script>
<!-- slick.js -->
<script src="slick/slick.min.js"></script>
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">
<script src="https://kit.fontawesome.com/a947f92a9e.js" crossorigin="anonymous"></script>
<!-- 공식 홈페이지에 CDN으로 가볍게 가져오는 것도 방법 중 하나 -->
<!-- 순서 맨아래에 있는게 중요 -->
<link rel="stylesheet" href="style.css">
<script src="js/custom.js"></script>
<title>반응형 웹사이트 연습</title>
</head>
<body>
<!-- width가 100%가 아닌 박스는 inner라는 공통 클래스를 넣어
가로너비와 마진을 정해놓는다 -->
<!-- slide 작업할 때 slick.js 사이트 참고하면 좋다 -->
<div class="container">
<!-- header -->
<!-- active가 들어갔을때 어떻게 나오는지 실험하기 위해 클래스 미리 넣어보기 -->
<header>
<div class="banner">
<div class="lnb">
<a href="#none"><em>for</em> member</a>
<a href="#none"><em>for</em> clients</a>
<a href="#none"><em>for</em> inquire</a>
</div>
</div>
<nav>
<div class="logo"><img src="images/logo.png" alt="-"></div>
<ul class="gnb">
<li><a href="#">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#ranking">RANKING</a></li>
<li><a href="#testimonial">TESTIMONIAL</a></li>
<li><a href="#blog">BLOG</a></li>
</ul>
</nav>
</header>
<!-- main -->
<main class="intro">
<div class="inner">
<div class="heading">
<h1>The World’s Best Cities</h1>
<p>It’s not just about good weather or grea t food and nightlife. Unlike other best-of lists, Resonance’s annual ranking also considers a city’s diversity.</p>
</div>
</div>
</main>
<!-- about -->
<!-- a태그와 아이디 태그 이름이 같은 걸 찾아감 -->
<section class="about" id="about">
<div class="inner">
<div class="about-content">
<div class="desc">
<h2>About Best Cities in the world</h2>
<p>
Factors including its highly rated nightlife landed Madrid, Spain, 12th on this list of world’s best cities. It’s not just about good weather or great food and nightlife. Unlike other best-of lists, Resonance’s annual ranking also considers a city’s diversity and, yes, the number of Instagram hashtags shared online to give a comprehensive view of what it’s like to visit and live in these places.<br><br>
To figure out where you should travel to next, there are plenty of lists out there ranking the world’s best cities. Some use reader polls to determine which place lands at the top, while others base rankings on data like its livability or how easy it is to bike there.
</p>
<a href="#none">Visit the place information</a>
</div>
<div class="photo">
<img src="images/about-img-01.jpg" alt="">
</div>
</div>
</div>
</section>
<!-- lank -->
<section class="ranking" id="ranking">
<div class="inner">
<div class="ranking-content">
<h2>The World’s 25 Best Cities of 2020</h2>
<div class="itmes">
<div class="item">
<div class="up-image">
<img src="images/best-city-01.jpg" alt="">
</div>
<div class="down-desc">
<span class="badge red">Must go</span>
<h3>London, England</h3>
<p>
London’s main sights might date back millennia, but the capital’s shops, bars, hotels, and restaurants emerge and evolve on an almost weekly basis.
</p>
<a class="btn-explore" href="#none">Explore <img src="images/icon-arrow.png" alt=""></a>
</div>
</div>
<div class="item">
<div class="up-image">
<img src="images/best-city-02.jpg" alt="">
</div>
<div class="down-desc">
<span class="badge">Good to go</span>
<h3>New York City, United States</h3>
<p>
New York’s performing arts scene—both on Broadway and off—is beloved by visitors and locals alike, so it’s no surprise that the Big Apple took the number one spot.
</p>
<a class="btn-explore" href="#none">Explore <img src="images/icon-arrow.png" alt=""></a>
</div>
</div>
<div class="item">
<div class="up-image">
<img src="images/best-city-03.jpg" alt="">
</div>
<div class="down-desc">
<span class="badge">Good to go</span>
<h3>Paris, France</h3>
<p>
The Notre Dame fire was a devastating reminder of how well-loved Paris is by travelers worldwide, and as the capital gears up for the 2024 Olympics
</p>
<a class="btn-explore" href="#none">Explore <img src="images/icon-arrow.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- test -->
<section class="testimonial" id="testimonial">
<div class="inner">
<div class="test-content">
<h2>what <b>our customers</b> are saying</h2>
<hr>
<div class="myslider">
<div>
<p class="client">
<img src="images/client-01.jpg" alt="">
<span><b>Coding Works</b>Seoul Korea</span>
</p>
<p class="comment">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugit eos maiores placeat pariatur, possimus libero maxime quod iusto! Culpa perspiciatis adipisci enim pariatur id voluptas deserunt assumenda magni facilis quae earum, sed sint magnam eligendi consequatur, officia praesentium voluptatem nesciunt cum illo eaque accusamus mollitia. Animi ea error accusantium.
</p>
</div>
<div>
<p class="client">
<img src="images/client-02.jpg" alt="">
<span><b>Kate Whitney</b>Los Angeles, US</span>
</p>
<p class="comment">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugit eos maiores placeat pariatur, possimus libero maxime quod iusto! Culpa perspiciatis adipisci enim pariatur id voluptas deserunt assumenda magni facilis quae earum, sed sint magnam eligendi consequatur, officia praesentium voluptatem nesciunt cum illo eaque accusamus mollitia. Animi ea error accusantium.
</p>
</div>
<div>
<p class="client">
<img src="images/client-03.jpg" alt="">
<span><b>Kelly Muvils</b>New York, US</span>
</p>
<p class="comment">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugit eos maiores placeat pariatur, possimus libero maxime quod iusto! Culpa perspiciatis adipisci enim pariatur id voluptas deserunt assumenda magni facilis quae earum, sed sint magnam eligendi consequatur, officia praesentium voluptatem nesciunt cum illo eaque accusamus mollitia. Animi ea error accusantium.
</p>
</div>
<div>
<p class="client">
<img src="images/client-04.jpg" alt="">
<span><b>Oliver</b>Califonia, US</span>
</p>
<p class="comment">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugit eos maiores placeat pariatur, possimus libero maxime quod iusto! Culpa perspiciatis adipisci enim pariatur id voluptas deserunt assumenda magni facilis quae earum, sed sint magnam eligendi consequatur, officia praesentium voluptatem nesciunt cum illo eaque accusamus mollitia. Animi ea error accusantium.
</p>
</div>
<div>
<p class="client">
<img src="images/client-05.jpg" alt="">
<span><b>Sophia</b>London, UK</span>
</p>
<p class="comment">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugit eos maiores placeat pariatur, possimus libero maxime quod iusto! Culpa perspiciatis adipisci enim pariatur id voluptas deserunt assumenda magni facilis quae earum, sed sint magnam eligendi consequatur, officia praesentium voluptatem nesciunt cum illo eaque accusamus mollitia. Animi ea error accusantium.
</p>
</div>
<div>
<p class="client">
<img src="images/client-06.jpg" alt="">
<span><b>Charlotte</b>Washington, US</span>
</p>
<p class="comment">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugit eos maiores placeat pariatur, possimus libero maxime quod iusto! Culpa perspiciatis adipisci enim pariatur id voluptas deserunt assumenda magni facilis quae earum, sed sint magnam eligendi consequatur, officia praesentium voluptatem nesciunt cum illo eaque accusamus mollitia. Animi ea error accusantium.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- call -->
<section class="callaction">
<div class="callaction-heading">
<h2>The Most Simple & <b>Powerful Way</b><br>to book <b>your trip</b></h2>
<a href="#none">GET EARLY ACCESS</a>
</div>
</section>
<!-- blog -->
<section class="blog" id="blog">
<div class="inner">
<div class="blog-content">
<div class="blog-header">
<h6>feature article</h6>
<h2>Can Americans Visit Mexico Right Now?</h2>
<p>Technically, there’s a ban on nonessential travel across the border through September 21. Then how are people on vacation in Cabo and Cancun right now?</p>
<!-- 위에쓴거 재사용 -->
<a class="btn-explore" href="#none">Read More <img src="images/icon-arrow.png" alt=""></a>
</div>
<hr class="divider">
<div class="post-content">
<div class="recent-post-items">
<h6>most recent</h6>
<div class="post-item">
<div class="post-image">
<img src="images/most-recent-01.jpg" alt="">
</div>
<div class="post-desc">
<h3>world ocean travel</h3>
<p>
The ocean provides a vast seascape for travel. Beyond the cruise ship there are other, more intimate, more environmentally sustainable ways to engage with the ocean.
</p>
<span>July 12, 2020</span>
</div>
</div>
<hr class="divider">
<div class="post-item">
<div class="post-image">
<img src="images/most-recent-02.jpg" alt="">
</div>
<div class="post-desc">
<h3>come to South Korea</h3>
<p>
While only 60 years ago South Korea was considered a developing country, it’s now one of Asia’s economic and cultural leaders. Super-chic Seoul combines modernism with ancient history
</p>
<span>August 22, 2020</span>
</div>
</div>
<hr class="divider">
<div class="post-item">
<div class="post-image">
<img src="images/most-recent-03.jpg" alt="">
</div>
<div class="post-desc">
<h3>Vietnam & Cambodia</h3>
<p>
Start in Hanoi and end in Bangkok! With the Discovery tour Best of Vietnam & Cambodia, you have a 18 days tour package taking you through Hanoi, Vietnam and 10 other destinations.
</p>
<span>June 30, 2020</span>
</div>
</div>
</div>
<div class="shared-post-items">
<h6>most shared</h6>
<div class="post-item">
<div class="post-image">
<img src="images/most-shared-01.jpg" alt="">
</div>
<div class="post-desc">
<h3>Events in NYC</h3>
<p>
New York City is the place to see and do everything
</p>
<span>May 02, 2020</span>
</div>
</div>
<hr class="divider">
<div class="post-item">
<div class="post-image">
<img src="images/most-shared-02.jpg" alt="">
</div>
<div class="post-desc">
<h3>FESTIVALS</h3>
<p>
Experiencing a festival together with a group of like-minded
</p>
<span>Jan 18, 2020</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- festival -->
<section class="festival">
<div class="festival-heading">
<h2><span>SEE ALL FESTIVALS</span> for the Best Trip Place</h2>
<div class="btn">
<a href="#none">Maxico Festivals</a>
<a href="#none">Barcelona Festivals</a>
</div>
</div>
</section>
<!-- footer -->
<footer>
<div class="inner">
<div class="footer-content">
<ul class="community">
<li>Community</li>
<li><a href="#none">Subscribe</a></li>
<li><a href="#none">Give A Gift</a></li>
<li><a href="#none">Customer Service FAQ</a></li>
<li><a href="#none">Access Your Subscription</a></li>
</ul>
<ul class="network">
<li>Network</li>
<li><a href="#none">Privacy Policy</a></li>
<li><a href="#none">Terms Of Service</a></li>
<li><a href="#none">Advertise</a></li>
<li><a href="#none">Jobs</a></li>
</ul>
<ul class="help">
<li>Help Preserve This Project</li>
<li>
We may earn a commission if you purchase an item
featured on our site.</li>
<li>Copyright © 2020 CodingWorks. All rights reserved.</li>
</ul>
</div>
</div>
</footer>
</div>
<!-- a태그를 #로 하면 위로 올라간다 -->
<a class="gototop" href="#"><i class="fa-solid fa-angle-up"></i></a>
</body>
</html>
$(function(){
// sliding jquery
$('.gnb a').click(function(e) {
e.preventDefault();
$.scrollTo(0, 800);
});
// header scroll change
$(window).scroll(function(){
// 윈도우 스크롤 탑이 50보다 크다면
if ($(window).scrollTop() > 50) {
// 선택자 헤더에 클래스를 붙인다 'active'
$('header, .gototop').addClass('active')
} else {
$('header, .gototop').removeClass('active')
}
})
// slick.js
$('.myslider').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});답변 2
0
코딩웍스(Coding Works)
지식공유자
몇년전까지만 해도 IE 때문에 scroll-behavior: smooth 사용을 조금 주저했었는데 지금은 그러지 않으셔도 됩니다.
자바스크립트나 제이쿼리 대신에 scroll-behavior: smooth 사용하시면 같은 효과를 낼 수 있습니다. 저도 요즘에 학원에서 scroll-behavior: smooth로 부드러운 슬라이딩 기능 만들라고 합니다.
아래 제이쿼리 대신에 scroll-behavior: smooth 사용하셔도 좋습니다. 물론 속도 조절은 불가능하지만 아주 적당한 속도로 세팅되어 있습다.
// sliding jquery
$('.gnb a').click(function(e) {
e.preventDefault();
$.scrollTo(0, 800);
});
CSS에 아래 선택자와 속성주세요.
html {
scroll-behavior: smooth
}
0
