728x90
반응형
질문 : 요소로 jQuery 스크롤
이 input 요소가 있습니다.
<input type="text" class="textfield" value="" id="subject" name="subject">그런 다음 다른 텍스트 입력, 텍스트 영역 등과 같은 다른 요소가 있습니다.
사용자가 #subject input 을 클릭하면 페이지가 멋진 애니메이션으로 페이지의 마지막 요소로 스크롤되어야합니다. 스크롤은 맨 아래가 아니라 맨 아래로 이동해야합니다.
페이지의 마지막 항목은 #submit submit 버튼입니다.
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">애니메이션은 너무 빠르지 않아야하며 유동적이어야합니다.
최신 jQuery 버전을 실행하고 있습니다. 플러그인을 설치하지 않고 기본 jQuery 기능을 사용하여이를 달성하는 것을 선호합니다.
답변
button 이있는 버튼이 있다고 가정하면 다음 예제를 시도해보십시오.
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});jQuery 플러그인이없는 요소로 Smoothly scroll to an article에서 코드를 얻었습니다. 그리고 아래 예제에서 테스트했습니다.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
});
});
</script>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
</html>출처 : https://stackoverflow.com/questions/6677035/jquery-scroll-to-element
728x90
반응형
'프로그래밍 언어 > jQuery, ajax' 카테고리의 다른 글
| jQuery를 사용하여 <input type='file' /> 값을 지우는 방법 (0) | 2021.08.06 |
|---|---|
| jQuery 비활성화 / 활성화 submit 버튼 (0) | 2021.08.06 |
| 모든 jQuery Ajax 요청이 완료될 때까지 대기하도록 하는 방법 (0) | 2021.08.04 |
| jQuery를 사용하여 양식 입력 필드를 얻는 방법 (0) | 2021.07.30 |
| 사용자가 외부를 클릭 할 때 jQuery를 사용하여 DIV를 숨기는 법. (0) | 2021.07.23 |