programing

jQuery를 사용하여 요소로 스크롤합니다.

javaba 2022. 12. 25. 11:10
반응형

jQuery를 사용하여 요소로 스크롤합니다.

게 요.input★★★★

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

같은<textarea>★★★★★★★★★★★★★★★★★★▼

가 [ ]를했을 때<input id="#subject">이 페이지는 페이지의 마지막 요소까지 스크롤하고 멋진 애니메이션으로 스크롤해야 합니다(위로 스크롤하지 말고 아래로 스크롤해야 합니다).

은 ★★★★★★★★★★★★★★★★★★★★★★★.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 플러그인 없이 요소까지 부드럽게 스크롤하는 기사에서 코드를 얻었습니다.그리고 아래 예시로 테스트했습니다.

<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

옵션:

스크롤 대상:원하는 스크롤 위치를 나타내는 요소, 문자열 또는 숫자.

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

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

easing : 이행에 사용할 easing 함수를 나타내는 문자열.

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

부드러운 스크롤 효과에 별로 관심이 없고 특정 요소로 스크롤하는 데만 관심이 있다면 jQuery 기능이 필요하지 않습니다.Javascript는 귀하의 사례를 커버합니다.

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

돼요.$("selector").get(0).scrollIntoView();

.get(0)JQuery DOM JavaScript DOM 입니다.

이것은 jQuery 없이도 가능합니다.

document.getElementById("element-id").scrollIntoView();

이 간단한 스크립트 사용

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

URL에 해시 태그가 있는 경우 스크롤 투가 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>

이게 내가 하는 방식이다.

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

모든 브라우저에서 동작합니다.

쉽게 함수로 포장할 수 있습니다.

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

다음은 작업 예시입니다.

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})
.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</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();

이 솔루션에서는 플러그인이 필요 없으며 닫기 전에 스크립트를 배치하는 것 외에 셋업이 필요하지 않습니다.</body>붙이다

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

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

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

그리고 - 를 클릭할 때마다a href "Hash").#top스크롤을 합니다.

##2020 편집

순수 JavaScript 솔루션을 원하는 경우: 대신 다음과 같은 것을 사용할 수 있습니다.

var _scrollToElement = function (selector) {
  try {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' });
  } catch (e) {
    console.warn(e);
  }
}

var _scrollToHashesInHrefs = function () {
  document.querySelectorAll("a[href^='#']").forEach(function (el) {
    el.addEventListener('click', function (e) {
      _scrollToElement(el.getAttribute('href'));
      return false;
    })
  })
  if (window.location.hash) {
    _scrollToElement(window.location.hash);
  }
}

_scrollToHashesInHrefs();

는, 「」를 할 수 있습니다.focus()예를 들어, 첫 번째 표시 입력까지 스크롤하는 경우:

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

클래스 「」를 ..error:

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

이걸 지적해준 트리샤 볼 덕분이야!

대상 div ID까지 페이지 스크롤을 쉽게 수행할 수 있는 방법

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

컨테이너 (「」가 )$('html, body')도인 위치과 같습니다.이 방법은 다음과 같습니다.

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

container.animate({
  scrollTop: pos
}

애니메이션:

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

코드를 실행하는 방법을 찾은 후에는 좀 더 명확히 해야 할 것 같습니다.사용방법:

$('html, body').animate({
   scrollTop: $("#div1").offset().top
}, 2000);

맨요, 페이지 맨 위에 있어야 돼요.$("#div1").offset().top스크롤한 위치에 따라 다른 번호가 반환됩니다.맨 을 한 .pageY 「」을 참조)pageY정의: https://javascript.info/coordinates)

이번에는 계산해 입니다.pageY.다음은 스크롤 컨테이너가 본문인 경우의 예입니다.

function getPageY(id) {
    let elem = document.getElementById(id);
    let box = elem.getBoundingClientRect();
    var body = document.getElementsByTagName("BODY")[0];
    return box.top + body.scrollTop; // for window scroll: box.top + window.scrollY;
}

위 함수는 스크롤한 경우에도 동일한 번호를 반환합니다.다음으로 해당 요소로 스크롤합니다.

$("html, body").animate({ scrollTop: getPageY('div1') }, "slow");

대부분의 경우 플러그인을 사용하는 것이 좋습니다.정말이에요.나는 여기서 내 것을 선전할 것이다.물론 다른 사람들도 있다.하지만 그들이 당신이 애초에 원하는 플러그인의 함정을 정말로 회피하는지 확인해 주세요.모든 함정이 그렇지는 않습니다.

다른 곳에서 플러그인을 사용하는 이유에 대해 적어두었습니다.간단히 말해서, 대부분의 답변을 뒷받침하는 하나의 라이너입니다.

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

불량 UX입니다.

  • 애니메이션이 사용자 작업에 응답하지 않습니다.사용자가 클릭, 탭 또는 스크롤을 시도해도 계속됩니다.

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

  • 대상 요소가 페이지 맨 아래 근처에 있으면 창 맨 위로 스크롤할 수 없습니다.스크롤 애니메이션이 도중에 갑자기 중지됩니다.

이러한 문제(및 기타 많은 문제)를 해결하려면 mine의 플러그인 jQuery.scrollable을 사용할 수 있습니다.그 후 콜은

$( window ).scrollTo( targetPosition );

그리고 이것이 마지막입니다.물론 더 많은 선택지가 있습니다.

타겟 포지션에 대해서$target.offset().top대부분의 경우 그 일을 한다.그러나 반환된 값은 다음 항목에 테두리가 없습니다.html(이 데모 참조)를 참조해 주세요.어떤 상황에서도 목표 위치가 정확해야 할 경우 다음을 사용하는 것이 좋습니다.

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

그것은 심지어 그 경계선이html요소가 설정되었습니다.

이것은 일반적인 클래스 셀렉터를 사용하여 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>

매우 간단하고 사용하기 쉬운 사용자 지정 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>

$('html, body').animate(...)아이폰, 안드로이드, 크롬 사파리

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

$('#content').애니메이션(...)

결론은 다음과 같습니다.

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

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

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

다음은 Atharva의 답변입니다.https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView문서가 iframe에 있는 경우, 상위 프레임에서 보기로 스크롤할 요소를 선택할 수 있습니다.

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

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

사용자가 #subject에서 해당 입력을 클릭하면 페이지가 멋진 애니메이션과 함께 페이지의 마지막 요소까지 스크롤됩니다.위가 아니라 아래쪽으로 스크롤해야 합니다.

페이지의 마지막 항목은 #submit(제출) 버튼입니다.

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

아래로 .#submit그런 다음 커서를 클릭한 입력으로 되돌립니다. 이 입력은 스크롤 다운을 모방하며 대부분의 브라우저에서 작동합니다.jQuery의 JavaScript입니다.

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>

모듈 스크롤 요소를 설정했습니다. 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)

다음 SO 포스트의 도움을 받아 작성되었습니다.

코드는 다음과 같습니다.

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

2019년 현재 업데이트된 답변:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');

온라이너

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});


subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'});
.box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}
<input type="text" class="textfield" value="click here" id="subject" name="subject">

<div class="box">
  Some content
  <textarea></textarea>
</div>

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

<div class="foot">Some footer</div>

중요한 것은 스크롤이 있는 DIV 안에 들어갈 수 있는 일반적인 요소에서 이런 동작을 할 수 있게 된 것입니다.이 경우 전체 본문을 스크롤하지 않고 오버플로우가 있는 특정 요소만 스크롤합니다: auto; 더 큰 레이아웃 내에서.

타깃 요소의 높이를 가짜로 입력한 후 포커스를 맞추면 스크롤 가능한 계층 내 깊이와 상관없이 브라우저가 나머지 부분을 처리합니다.마법처럼 작동한다.

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 targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

언급URL : https://stackoverflow.com/questions/6677035/scroll-to-an-element-with-jquery

반응형
저작자표시

'programing' 카테고리의 다른 글

Python의 easy_install에 설치된 패키지를 삭제하려면 어떻게 해야 합니까?  (0) 2023.01.09
Vuex 변환을 사용하여 개체 참조를 업데이트하는 올바른 방법은 무엇입니까?  (0) 2022.12.25
numpy.array 형상(R, 1)과 (R,)의 차이  (0) 2022.12.25
kill - 3을 사용하여 Java 스레드 덤프를 가져옵니다.  (0) 2022.12.25
초기화되지 않은 개체 vs NULL로 초기화됨  (0) 2022.12.25

'programing'의 다른글

  • 현재글jQuery를 사용하여 요소로 스크롤합니다.

관련글

댓글

티스토리툴바