javascript - 이동 - jquery 스크롤 내리기



jQuery 요소로 스크롤 (18)

사용자가 #subject를 사용하여 해당 입력을 클릭하면 페이지는 멋진 애니메이션으로 페이지의 마지막 요소로 스크롤해야합니다. 상단에서 위로 스크롤하지 말아야합니다.

페이지의 마지막 항목은 #smit와 함께 제출 버튼입니다.

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

이렇게하면 처음에는 #submit 스크롤 한 다음 클릭 한 입력으로 커서를 복원하고 스크롤을 모방 한 다음 대부분의 브라우저에서 작동합니다. 또한 순수한 JavaScript로 작성 될 수 있으므로 jQuery가 필요하지 않습니다.

이러한 focus 사용 방식은 focus 호출 연결을 통해 더 좋은 방법으로 애니메이션을 모방 할 수 있습니까? 나는이 이론을 테스트하지 않았지만 다음과 같이 보일 것이다.

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

https://ffff65535.com

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


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

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

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

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


div id를 목표로 페이지 스크롤을 쉽게 얻을 수 있습니다.

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

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>


나는 모듈 scroll-element npm install scroll-element 하도록 설정했다. 그것은 다음과 같이 작동합니다 :

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

다음과 같은 게시물의 도움으로 작성된 :

다음은 코드입니다.

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}

대부분의 경우 플러그인을 사용하는 것이 가장 좋습니다. 진지하게. 나는 여기에서 나의 것을 선전 할 예정이다. 물론 다른 것들도 있습니다. 그러나 처음에 플러그인을 원할 수있는 함정을 피하는 지 확인하십시오. 플러그인을 모두 사용하는 것은 아닙니다.

나는 elsewhere 에서 플러그인을 사용하는 이유에 대해 썼다. 요컨대, 대부분의 답변을 뒷받침하는 하나의 라이너가 여기에 있습니다.

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

나쁜 UX입니다.

  • 애니메이션이 사용자 작업에 응답하지 않습니다. 사용자가 클릭하거나 두 드렸거나 스크롤하려고해도 계속됩니다.

  • 애니메이션의 시작점이 대상 요소에 가까우면 애니메이션이 매우 느립니다.

  • 대상 요소가 페이지 아래쪽 가까이에 배치되면 창 상단으로 스크롤 할 수 없습니다. 스크롤 애니메이션은 중간 동작에서 갑작스럽게 멈 춥니 다.

이러한 문제 (및 elsewhere 문제)를 처리하기 위해 jQuery.scrollable 이라는 플러그인을 사용할 수 있습니다. 그러면 통화가됩니다.

$( window ).scrollTo( targetPosition );

그리고 그게 다야. 물론 더 많은 옵션이 있습니다 .

목표 위치와 관련하여 $target.offset().top 은 대부분의 경우 작업을 수행합니다. 그러나 반환 값은 html 요소의 경계를 고려하지 않음을 명심 하십시오 (이 데모 참조 ). 어떠한 상황에서도 목표 위치가 정확해야하는 경우,

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

html 요소의 테두리가 설정되어 있어도 작동합니다.


매우 간단하고 사용하기 쉬운 커스텀 jQuery 플러그인. 클릭 가능한 요소에 scroll= 속성을 추가하고 해당 값을 스크롤 할 선택기로 설정하면됩니다.

이렇게 : <a scroll="#product">Click me</a> . 모든 요소에서 사용할 수 있습니다.

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>

애니메이션 :

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

이 간단한 스크립트 사용하기

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

url에서 해시 태그가 발견되면 scrollTo가 ID에 애니메이션을 적용합니다. 해시 태그가 발견되지 않으면 스크립트를 무시하십시오.



이것은 나를 위해 일했다 :

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

이것이 가치있는 일이라면 스크롤을 사용하여 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();

전체 요소를 표시하려면 (현재 창 크기로 가능할 경우) :

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);

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 : 애니메이션이 완료되면 호출하는 함수.


이 솔루션 을 사용하면 플러그인이 필요 없으며 닫는 </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 링크를 클릭 할 때마다 스크롤합니다.


$('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);

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

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




jquery