Smooth Scrolling 작동
350
신돌식
작성한 질문수 2
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>답변 1
0
/* Smooth Scroll */
$('header a, .btn-goto-top').click(function(e) {
$.scrollTo(this.hash || 0, 900);
e.preventDefault();
})
매개변수 e가 빠지신 것 같은데요. 혹시 다른게 문제가 없다면 매개변수 e 넣고 해보세요.
혹시 안되면 글 다시 올려주세요.
class 값 한 번에 부여하는법
2
95
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
79
1
div#css-checker-widget의 해결방
1
71
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
94
2
강의듣는법
1
86
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
75
2
input checked 질문합니다.
0
81
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
152
2
Part 1 영상 안나옵니다
1
97
1
제이쿼리 작동이 안됩니다
1
211
3
강의 내용 질문있습니다.
1
128
2
일정 부분만 주석하는 방법
1
222
2
폰트어썸
1
144
2
인접선택자에 대한 질문드립니다!
1
135
2
delay 적용 안됨
1
137
1
rotateY(360deg)가 적용이 안됩니다!
1
190
2
세로이동할때 height값
1
142
2
폰트어썸이 안되요..
1
504
2
화면 정중앙에 오게끔 할수있나요?
1
175
1
어코디언 네비게이션 중
1
127
1
라이브서버 문제
1
241
2
넷플릭스 어코디언 예제 질문
1
107
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
163
1
active 관련 질문
1
150
2