javascript html 특정 - jQuery 요소로 스크롤





13 Answers

jQuery .scrollTo () :

이 간단한 플러그인을 작성하여 페이지 / 요소 스크롤을 훨씬 쉽게 만들 수있었습니다. 대상 요소 나 지정된 값을 전달할 수있는 곳에서 유연합니다. 아마도 이것은 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 : 애니메이션이 완료되면 호출하는 함수.

위치 이동 버튼

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 기능을 사용하는 것을 선호한다.




ScrollTo 플러그인을 확인하십시오. 에서 데모를 볼 수 있습니다.

나는 그것이 도움이되기를 바랍니다.




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>




"애니메이션"솔루션의 간결한 버전입니다.

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

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

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




이 솔루션 을 사용하면 플러그인이 필요 없으며 닫는 </body> 태그 전에 스크립트를 배치하는 것 외에 별도의 설정이 필요 없습니다 .

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

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

로드 할 때 주소에 해시가 있으면 해당 주소로 스크롤합니다.

#top 과 같은 href 해시가 a 링크를 클릭 할 때마다 스크롤합니다.




이것은 ID와 href를 추상화하는 나의 접근 방식이며, 일반적인 클래스 선택기를 사용합니다.

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 500);
  });
});
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>




var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};



$('html, body').animate(...) 는 iphone에서 안드로이드 크롬 사파리 브라우저를 사용하지 않습니다.

페이지의 루트 콘텐츠 요소를 대상으로해야했습니다.

$ ( '# cotnent'). animate (...)

여기에 내가 무엇을 끝내 었는가?

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

모든 본문 내용이 #content div로 묶입니다.

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>



$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);



jQuery 객체, CSS 선택기 또는 숫자 값으로 스크롤하는 범용 함수를 작성했습니다.

사용 예 :

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

함수의 코드는 다음과 같습니다.

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};



이것이 가치있는 일이라면 스크롤을 사용하여 DIV 안에있을 수있는 일반적인 요소에 대해 이러한 동작을 달성 할 수있었습니다. 우리의 경우 우리는 몸 전체를 스크롤하지 않고 오버플로가있는 특정 요소 만 스크롤합니다. 더 큰 레이아웃 내에서.

그것은 대상 요소의 높이에 대한 가짜 입력을 생성 한 다음 초점을 둡니다. 그러면 스크롤 가능한 계층 구조 내에서 브라우저가 나머지 부분에 상관없이주의를 기울입니다. 매력처럼 작동합니다.

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();



위의 $('html, body') 대신 오버플로 컨테이너 내에서 스크롤하려는 경우 절대 위치 지정과 함께 작업하는 것이 좋습니다.

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}



이것은 나를 위해 일했다 :

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);



Related