-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
Smooth Scrolling 작동
21.08.28 16:35 작성 조회수 250
1
예제와 똑같이 Jquery를 했는데도 Smooth Scrolling이 작동을 하지 않습니다. ㅠㅠ
<!DOCTYPE html>
<html lang="ko">
<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">
<title>a 앵커 만들기</title>
<!-- <script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery.scrollTo.min.js"></script> -->
<style>
html {
scroll-behavior: smooth;
}
body {
margin: 0;
}
header a {
background-color: teal;
color: #fff;
text-transform: uppercase;
text-decoration: none;
padding: 10px 20px;
}
p {
font-size: 1.5em;
line-height: 2em;
}
.btn-goto-top {
background-color: pink;
color: #fff;
text-decoration: none;
padding: 10px 20px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="container">
<header>
<a href="#part1">html part</a>
<a href="#part2">css part</a>
<a href="#part3">Jquery part</a>
<a href="#part4">portfolio part</a>
</header>
<h1 id="part1">html part</h1>
<hr>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus placeat quos numquam laudantium mollitia doloribus magnam, excepturi ducimus nihil error dolor unde repudiandae repellat veritatis aspernatur. Dolorem laboriosam repellat quisquam iusto consectetur cumque officia nobis corporis eligendi, quaerat eos voluptatem sint illum perspiciatis sed maiores, voluptatibus culpa doloribus aspernatur asperiores autem rerum ratione quod optio! Hic, obcaecati veniam accusantium vero earum, repudiandae magnam delectus nesciunt error ea natus porro exercitationem, quas odio suscipit aut reprehenderit. Inventore, facilis sunt nostrum similique sit exercitationem tempore eum doloribus aperiam provident sed? Perspiciatis, illum cum ex voluptas vero qui voluptate soluta similique quae veniam voluptatum? Neque, quidem molestias ab eligendi dolore eius illum doloremque officia vel iusto deserunt repellendus recusandae amet qui iste? Adipisci eveniet, minima aperiam commodi, dignissimos recusandae corrupti mollitia assumenda voluptatibus doloribus quidem est rem nam earum, error qui quae quaerat sit omnis quo cumque vitae. Exercitationem omnis optio quisquam ratione nobis minus laborum nostrum cumque. Beatae est eligendi dicta asperiores saepe quo, placeat eos harum, laudantium, distinctio aperiam. Nulla, assumenda inventore? Repudiandae debitis nulla nihil animi magni architecto inventore voluptatum expedita, odio atque hic aspernatur sit, suscipit, aut accusantium cupiditate vero omnis ipsum ea! Corrupti adipisci ut dicta eligendi!
</p>
<a href="#" class="btn-goto-top">Go to top</a> <!-- #은 문서의 가장 상위 -->
<h1 id="part2">css part</h1>
<hr>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus placeat quos numquam laudantium mollitia doloribus magnam, excepturi ducimus nihil error dolor unde repudiandae repellat veritatis aspernatur. Dolorem laboriosam repellat quisquam iusto consectetur cumque officia nobis corporis eligendi, quaerat eos voluptatem sint illum perspiciatis sed maiores, voluptatibus culpa doloribus aspernatur asperiores autem rerum ratione quod optio! Hic, obcaecati veniam accusantium vero earum, repudiandae magnam delectus nesciunt error ea natus porro exercitationem, quas odio suscipit aut reprehenderit. Inventore, facilis sunt nostrum similique sit exercitationem tempore eum doloribus aperiam provident sed? Perspiciatis, illum cum ex voluptas vero qui voluptate soluta similique quae veniam voluptatum? Neque, quidem molestias ab eligendi dolore eius illum doloremque officia vel iusto deserunt repellendus recusandae amet qui iste? Adipisci eveniet, minima aperiam commodi, dignissimos recusandae corrupti mollitia assumenda voluptatibus doloribus quidem est rem nam earum, error qui quae quaerat sit omnis quo cumque vitae. Exercitationem omnis optio quisquam ratione nobis minus laborum nostrum cumque. Beatae est eligendi dicta asperiores saepe quo, placeat eos harum, laudantium, distinctio aperiam. Nulla, assumenda inventore? Repudiandae debitis nulla nihil animi magni architecto inventore voluptatum expedita, odio atque hic aspernatur sit, suscipit, aut accusantium cupiditate vero omnis ipsum ea! Corrupti adipisci ut dicta eligendi!
</p>
<a href="#" class="btn-goto-top">Go to top</a>
<h1 id="part3">Jquery part</h1>
<hr>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus placeat quos numquam laudantium mollitia doloribus magnam, excepturi ducimus nihil error dolor unde repudiandae repellat veritatis aspernatur. Dolorem laboriosam repellat quisquam iusto consectetur cumque officia nobis corporis eligendi, quaerat eos voluptatem sint illum perspiciatis sed maiores, voluptatibus culpa doloribus aspernatur asperiores autem rerum ratione quod optio! Hic, obcaecati veniam accusantium vero earum, repudiandae magnam delectus nesciunt error ea natus porro exercitationem, quas odio suscipit aut reprehenderit. Inventore, facilis sunt nostrum similique sit exercitationem tempore eum doloribus aperiam provident sed? Perspiciatis, illum cum ex voluptas vero qui voluptate soluta similique quae veniam voluptatum? Neque, quidem molestias ab eligendi dolore eius illum doloremque officia vel iusto deserunt repellendus recusandae amet qui iste? Adipisci eveniet, minima aperiam commodi, dignissimos recusandae corrupti mollitia assumenda voluptatibus doloribus quidem est rem nam earum, error qui quae quaerat sit omnis quo cumque vitae. Exercitationem omnis optio quisquam ratione nobis minus laborum nostrum cumque. Beatae est eligendi dicta asperiores saepe quo, placeat eos harum, laudantium, distinctio aperiam. Nulla, assumenda inventore? Repudiandae debitis nulla nihil animi magni architecto inventore voluptatum expedita, odio atque hic aspernatur sit, suscipit, aut accusantium cupiditate vero omnis ipsum ea! Corrupti adipisci ut dicta eligendi!
</p>
<a href="#" class="btn-goto-top">Go to top</a>
<h1 id="part4">portfolio part</h1>
<hr>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus placeat quos numquam laudantium mollitia doloribus magnam, excepturi ducimus nihil error dolor unde repudiandae repellat veritatis aspernatur. Dolorem laboriosam repellat quisquam iusto consectetur cumque officia nobis corporis eligendi, quaerat eos voluptatem sint illum perspiciatis sed maiores, voluptatibus culpa doloribus aspernatur asperiores autem rerum ratione quod optio! Hic, obcaecati veniam accusantium vero earum, repudiandae magnam delectus nesciunt error ea natus porro exercitationem, quas odio suscipit aut reprehenderit. Inventore, facilis sunt nostrum similique sit exercitationem tempore eum doloribus aperiam provident sed? Perspiciatis, illum cum ex voluptas vero qui voluptate soluta similique quae veniam voluptatum? Neque, quidem molestias ab eligendi dolore eius illum doloremque officia vel iusto deserunt repellendus recusandae amet qui iste? Adipisci eveniet, minima aperiam commodi, dignissimos recusandae corrupti mollitia assumenda voluptatibus doloribus quidem est rem nam earum, error qui quae quaerat sit omnis quo cumque vitae. Exercitationem omnis optio quisquam ratione nobis minus laborum nostrum cumque. Beatae est eligendi dicta asperiores saepe quo, placeat eos harum, laudantium, distinctio aperiam. Nulla, assumenda inventore? Repudiandae debitis nulla nihil animi magni architecto inventore voluptatum expedita, odio atque hic aspernatur sit, suscipit, aut accusantium cupiditate vero omnis ipsum ea! Corrupti adipisci ut dicta eligendi!
</p>
<a href="#" class="btn-goto-top">Go to top</a>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
/* Smooth Scroll */
$('header a, .btn-goto-top').click(function() {
$.scrollTo(this.hash || 0, 900);
e.preventDefault();
})
</script>
</body>
</html>
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2021.08.28
/* Smooth Scroll */
$('header a, .btn-goto-top').click(function(e) {
$.scrollTo(this.hash || 0, 900);
e.preventDefault();
})
매개변수 e가 빠지신 것 같은데요. 혹시 다른게 문제가 없다면 매개변수 e 넣고 해보세요.
혹시 안되면 글 다시 올려주세요.
답변 1