[javascript] 요소로 jQuery 스크롤

나는이 input요소를 가지고있다 :

<input type="text" class="textfield" value="" id="subject" name="subject">

그런 다음 다른 텍스트 입력, 텍스트 영역 등과 같은 다른 요소가 있습니다.

그 사용자가 클릭을 할 때 input와 #subject페이지가 멋진 애니메이션 페이지의 마지막 요소로 이동합니다. 맨 아래가 아닌 맨 아래로 스크롤해야합니다.

페이지의 마지막 항목은 다음 submit과 같은 버튼입니다 #submit.

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

애니메이션은 너무 빠르지 않아야하며 유동적이어야합니다.

최신 jQuery 버전을 실행 중입니다. 플러그인을 설치하지 않고 기본 jQuery 기능을 사용하여이를 달성하는 것을 선호합니다.

답변

id 버튼이 있다고 가정하면 button다음 예제를 시도하십시오.

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

기사에서 코드를 얻었습니다 .jQuery 플러그인이없는 요소로 부드럽게 스크롤 하십시오 . 그리고 아래 예제에서 테스트했습니다.

<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>

스 니펫 확장

답변

jQuery .scrollTo () : 보기-데모, API, 소스

페이지 / 요소 스크롤을 훨씬 쉽게하기 위해이 경량 플러그인을 작성했습니다. 대상 요소 또는 지정된 값을 전달할 수있는 유연성이 있습니다. 아마도 이것은 jQuery의 다음 공식 릴리스의 일부일 수 있습니다. 어떻게 생각하십니까?

사용 예 :

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

옵션 :

scrollTarget : 원하는 스크롤 위치를 나타내는 요소, 문자열 또는 숫자입니다.

offsetTop : 스크롤 대상 위에 추가 간격을 정의하는 숫자입니다.

duration : 애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.

easing : 전환에 사용할 여유 함수를 나타내는 문자열입니다.

complete : 애니메이션이 완료되면 호출하는 함수입니다.

답변

부드러운 스크롤 효과에 관심이없고 특정 요소로 스크롤하는 데 관심이 있다면이를 위해 jQuery 함수가 필요하지 않습니다. Javascript는 귀하의 사례를 다루었습니다.

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

따라서 필요한 것은 다음과 같습니다. $("selector").get(0).scrollIntoView();

.get(0) JQuery의 DOM 요소가 아닌 JavaScript의 DOM 요소를 검색하려고하기 때문에 사용됩니다.

답변

이 간단한 스크립트를 사용하여

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

URL에 해시 태그가 있으면 scrollTo가 ID로 애니메이션되도록 정렬하십시오. 해시 태그가 없으면 스크립트를 무시하십시오.

답변

jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>

스 니펫 확장

답변

Steve와 Peter의 솔루션은 매우 잘 작동합니다.

그러나 경우에 따라 값을 정수로 변환해야 할 수도 있습니다. 이상하게도에서 반환 된 값 $("...").offset().top은에 float있습니다.
사용하다:parseInt($("....").offset().top)

예를 들면 다음과 같습니다.

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

답변

“애니메이션”솔루션의 컴팩트 버전.

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

기본 사용법 : $('#your_element').scrollTo();