[javascript] jQuery 요소로 스크롤



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

Question

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




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



나는 모듈 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 }
}



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




입력 요소에 대한 스크롤 만 처리하는 경우 focus() 사용할 수 있습니다. 예를 들어 첫 번째로 볼 수있는 입력으로 스크롤하려는 경우 :

$(':input:visible').first().focus();

또는 클래스 .error 가있는 컨테이너에서 첫 번째로 볼 수있는 입력입니다.

$('.error :input:visible').first().focus();

Tricia Ball 에게 감사드립니다!




매우 간단하고 사용하기 쉬운 커스텀 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>



사용자가 #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>



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

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

container.animate({
  scrollTop: pos
}



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

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



이것은 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>




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

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




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

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

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



Related