질문자 :DiegoP.
이 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 기능을 사용하는 것을 선호합니다.
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 요소를 검색하기를 원하기 때문에 사용됩니다.
이것은 jQuery 없이 달성할 수 있습니다.
document.getElementById("element-id").scrollIntoView();이 간단한 스크립트를 사용하여
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); });이것이 내가 하는 방법이다.
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>"애니메이션" 솔루션의 컴팩트 버전입니다.
$.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); }로드 시 주소에 해시가 있으면 해당 해시로 스크롤합니다.
href 해시(예: #top a 링크를 클릭할 때마다 해당 링크로 스크롤됩니다.
##편집 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();이 점을 지적 해주신 Tricia Ball 에게 감사드립니다!
$('html, body') 대신 오버플로 컨테이너 내에서 스크롤하려는 경우 절대 위치 지정 작업도 수행하려면 다음을 수행합니다.
var elem = $('#myElement'), container = $('#myScrollableContainer'), pos = elem.position().top + container.scrollTop() - container.position().top; container.animate({ scrollTop: pos }div ID를 대상으로 페이지 스크롤을 달성하는 쉬운 방법
var targetOffset = $('#divID').offset().top; $('html, body').animate({scrollTop: targetOffset}, 1000);애니메이션:
// 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: $target.offset().top }, duration );나쁜 UX입니다.
애니메이션은 사용자 작업에 응답하지 않습니다. 사용자가 클릭, 탭 또는 스크롤을 시도하더라도 계속됩니다.
애니메이션의 시작점이 대상 요소에 가까우면 애니메이션이 고통스러울 정도로 느립니다.
대상 요소가 페이지 하단 근처에 배치되면 창 상단으로 스크롤할 수 없습니다. 스크롤 애니메이션이 중간에 갑자기 멈춥니다.
이러한 문제(및 기타 여러 문제)를 처리하기 위해 내 플러그인인 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>내 코드가 작동하도록 하는 방법을 찾은 후에는 좀 명확하게 해야 한다고 생각합니다. 다음을 사용하는 경우:
$('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");이것은 일반 클래스 선택기를 사용하여 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>$('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); };https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView 의 Atharva 답변입니다. 문서가 iframe에 있는 경우 추가하고 싶었습니다. 상위 프레임에서 요소를 선택하여 보기로 스크롤할 수 있습니다.
$('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();$('html, body').animate(...) 는 iPhone, Android, Chrome 또는 Safari 브라우저에서 작동하지 않습니다.
페이지의 루트 콘텐츠 요소를 대상으로 지정해야 했습니다.
$('#코튼').애니메이트(...)
내가 끝내는 것은 다음과 같습니다.
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>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, eg * 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 까지 아래로 스크롤한 다음 커서를 클릭한 입력으로 다시 복원합니다. 이는 아래로 스크롤을 모방하고 대부분의 브라우저에서 작동합니다. 또한 순수 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>스크롤 요소 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>전체 요소를 표시하려면(현재 창 크기로 가능한 경우):
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);가치가 있는 것은 스크롤링이 있는 DIV 내부에 있을 수 있는 일반 요소에 대해 이러한 동작을 달성한 방법입니다. 우리의 경우 전체 본문을 스크롤하지 않고 overflow: 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);출처 : http:www.stackoverflow.com/questions/6677035/scroll-to-an-element-with-jquery
| 문자열을 float 또는 int로 구문 분석하는 방법은 무엇입니까? (0) | 2021.11.13 |
|---|---|
| 배열에 Java의 특정 값이 포함되어 있는지 어떻게 확인합니까? (0) | 2021.11.13 |
| jQuery로 입력을 비활성화/활성화하시겠습니까? (0) | 2021.11.13 |
| 설치된 npm 패키지의 버전 찾기 (0) | 2021.11.13 |
| 단일 비트를 어떻게 설정, 지우고 토글합니까? (0) | 2021.11.11 |