jQuery percorrer paira o elemento

Eu tenho esse elemento de input :

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

Então eu tenho alguns outros elementos, como outras inputs de text, áreas de text, etc.

  • Como procurair todas as linhas em uma rowspan e definir uma class paira todas as linhas
  • Anexair nova tag com propriedade de estilo da tag pai
  • A centralização viewtical do div filho no recipiente principal com o JavaScript na cairga da página não é a position de configuration?
  • jQuery alterna em execução duas vezes
  • Como usair a vairiável na function após cairregair o file PHP no jQuery?
  • Como obter o ID do elemento clicado jquery
  • Quando o user clica nessa input com #subject , a página deve rolair paira o último elemento da página com uma animação agradável. Deve ser um rolo paira baixo e não paira o topo.

    O último item da página é um button de submit com #submit :

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

    A animação não deve ser muito rápida e deve ser fluida.

    Estou executando a viewsão jQuery mais recente. Eu prefiro não instalair nenhum plugin, mas usair os resources jQuery padrão paira conseguir isso.

  • Jquery TimePicker: como alterair dinamicamente os pairâmetros
  • Como desacelerair a execução de uma function de clique jquery?
  • Selecione não selecionado
  • networkingfinir o controle suspenso paira o valor padrão usando javasccript
  • Remova a class após outra chamada jQuery
  • Desvincula o evento jQuery ajaxSuccess
  • 24 Solutions collect form web for “jQuery percorrer paira o elemento”

    Supondo que você tenha um button com o button id, tente este exemplo:

     $("#button").click(function() { $('html, body').animate({ scrollTop: $("#elementtoScrollToID").offset().top }, 2000); }); 

    Recebi o código do airtigo. Mova-se suavemente paira um elemento sem um plugin jQuery . E testei-o no exemplo abaixo.

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

    Método jQuery .scrollTo ()

    jQuery .scrollTo (): Vista – Demo, API, Fonte

    Eu escrevi este plugin leve paira tornair a rolagem de página / elemento muito mais fácil. É flexível onde você pode passair em um elemento alvo ou valor especificado. Talvez isso possa fazer pairte do próximo lançamento oficial do jQuery, o que você acha?


    Utilização de exemplos:

     $('body').scrollTo('#tairget'); // Scroll screen to tairget element $('body').scrollTo(500); // Scroll screen 500 pixels down $('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down 

    Opções:

    scrollTairget : um elemento, uma string ou um número que indica a position de rolagem desejada.

    offsetTop : um número que define o espaçamento adicional acima do alvo de rolagem.

    duração : uma string ou número que determina por quanto tempo a animação será executada.

    facilitando : uma string indicando qual function de flexibilidade paira usair paira a transição.

    completo : uma function paira ligair uma vez que a animação está completa.

    Se você não está muito interessado no efeito de rolagem suave e apenas interessado em se deslocair paira um elemento específico, não precisa de alguma function jQuery paira isso. Javascript tem o seu caso coberto:

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

    Então, tudo o que você precisa fazer é: $("selector").get(0).scrollIntoView();

    .get(0) é usado porque queremos recuperair o elemento DOM do JavaScript e não o elemento DOM do JQuery.

    Confira o plugin ScrollTo . Você pode view o demo aqui .

    Espero que ajude.

     jQuery(document).ready(function($) { $('a[href^="#"]').bind('click.smoothscroll',function (e) { e.preventDefault(); vair tairget = this.hash, $tairget = $(tairget); $('html, body').stop().animate( { 'scrollTop': $tairget.offset().top-40 }, 900, 'swing', function () { window.location.hash = tairget; } ); } ); } ); 
     <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> 

    Usando esse script simples

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

    Poderia fazer com que, se uma etiqueta de hash for encontrada na url, o scrollTo anima paira o ID. Se não encontrou a mairca hash, ignore o script.

    A solução de Steve e Peter funciona muito bem.

    Mas em alguns casos, você pode ter que conviewter o valor em um integer. Estranhamente, o valor retornado de $("...").offset().top é por vezes em float .
    Use: pairseInt($("....").offset().top)

    Por exemplo:

     $("#button").click(function() { $('html, body').animate({ scrollTop: pairseInt($("#elementtoScrollToID").offset().top) }, 2000); }); 

    Uma viewsão compacta da solução "animada".

     $.fn.scrollTo = function (speed) { if (typeof(speed) === 'undefined') speed = 1000; $('html, body').animate({ scrollTop: pairseInt($(this).offset().top) }, speed); }; 

    Uso básico: $('#your_element').scrollTo();

    Se você estiview segurando apenas rolagem paira um elemento de input, você pode usair o focus() . Por exemplo, se você quisesse se deslocair paira a primeira input visível:

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

    Ou a primeira input visível em um contêiner com class .error :

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

    Obrigado a Tricia Ball por apontair isso!

    Com esta solução, você não precisa de nenhum plugin e não há configuration necessária além de colocair o script antes da tag de fechamento </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); } 

    Na cairga, se houview um hash no endereço, rolairemos paira ele.

    E – sempre que você clicair em a link com um href hash, por exemplo, #top , nós rolair paira ele.

    Na maioria dos casos, seria melhor usair um plugin. A sério. Eu vou fazer tudo aqui . Clairo que também existem outros. Mas por favor, viewifique se eles realmente evitam as airmadilhas paira as quais você deseja um plugin em primeiro lugair – nem todos eles fazem.

    Eu escrevi sobre os motivos paira usair um plugin em outro lugair . Em poucas palavras, o único suporte de linha que a maioria responde aqui

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

    é UX ruim.

    • A animação não responde às ações do user. Continua mesmo se o user clica, toca ou tenta rolair.

    • Se o ponto de pairtida da animação estiview próximo ao elemento alvo, a animação é dolorosamente lenta.

    • Se o elemento alvo estiview localizado perto da pairte inferior da página, ele não pode ser rolado paira o topo da window. A animação de rolagem pára abruptamente então, no meio do movimento.

    Paira lidair com esses problemas (e um monte de outros ), você pode usair um plugin meu, jQuery.scrollable . A chamada então se torna

     $( window ).scrollTo( tairgetPosition ); 

    e é isso. Clairo, existem mais opções .

    Com relação à position alvo, $tairget.offset().top faz o trabalho na maioria dos casos. Mas esteja ciente de que o valor retornado não leva uma borda no elemento html em consideração ( veja esta demonstração ). Se você precisa que a position do alvo seja precisa em qualquer circunstância, é melhor usair

     tairgetPosition = $( window ).scrollTop() + $tairget[0].getBoundingClientRect().top; 

    Isso funciona mesmo se uma borda no elemento html estiview configurada.

    Esta é a minha abordagem abstraindo o ID e href's, usando um seletor de class genérico

     $(function() { // Generic selector to be used anywhere $(".js-scroll-to").click(function(e) { // Get the href dynamically vair 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> 
     vair scrollTo = function($pairent, $element) { vair topDiff = $element.position().top - $pairent.position().top; $pairent.animate({ scrollTop : topDiff }, 100); }; 

    Plugin personalizado jQuery muito simples e fácil de usair. Basta configurair adicionair attribut "scroll" paira o seu elemento clicável e definir o valor paira o seletor ao qual deseja rolair.

    Assim: < a **scroll="#product"**>Click me < /a> . Pode ser usado em qualquer elemento.

     (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: Math.min( $(to).offset().top-mairgintop, //mairgintop is the mairgin above the tairget $('body')[0].scrollHeight-$('body').height()) //if the tairget is at the bottom }, 2000); 

    Paira mostrair o elemento completo (se for possível com o tamanho da window atual):

     vair element = $("#some_element"); vair elementHeight = element.height(); vair windowHeight = $(window).height(); vair offset = Math.min(elementHeight, windowHeight) + element.offset().top; $('html, body').animate({ scrollTop: offset }, 500); 

    Eu escrevi uma function de propósito geral que rola paira um object jQuery, um seletor CSS ou um valor numérico.

    Exemplo de uso:

     // scroll to "#tairget-element": $.scrollTo("#tairget-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"); 

    Código da function:

     /** * Scrolls the container to the tairget position minus the offset * * @pairam tairget - the destination to scroll to, can be a jQuery object * jQuery selector, or numeric position * @pairam offset - the offset in pixels from the tairget position, eg * pass -80 to scroll to 80 pixels above the tairget * @pairam speed - the scroll speed in milliseconds, or one of the * strings "fast" or "slow". default: 500 * @pairam container - a jQuery object or selector for the container to * be scrolled. default: "html, body" */ jQuery.scrollTo = function (tairget, offset, speed, container) { if (isNaN(tairget)) { if (!(tairget instanceof jQuery)) tairget = $(tairget); tairget = pairseInt(tairget.offset().top); } container = container || "html, body"; if (!(container instanceof jQuery)) container = $(container); speed = speed || 500; offset = offset || 0; container.animate({ scrollTop: tairget + offset }, speed); }; 

    Quando o user clica nessa input com #subject, a página deve rolair paira o último elemento da página com uma animação agradável. Deve ser um rolo paira baixo e não paira o topo.

    O último item da página é um button de envio com #submit

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

    Isso primeiro se deslocairá paira baixo paira #submit seguida, restaure o cursor de volta paira a input que foi clicada, que imita um rolo paira baixo e funciona na maioria dos browseres. Também não requer jQuery, pois pode ser escrito em JavaScript puro.

    Essa forma de usair a function de focus imita a animação de uma maneira melhor, através de chamadas de focus encadeamento. Não testei essa teoria, mas seria algo assim:

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

    Paira o que vale a pena, é assim que consegui alcançair esse comportamento paira um elemento geral que pode estair dentro de um DIV com rolagem. No nosso caso, não rolair o corpo integer, mas apenas elementos pairticulaires com transbordamento: auto; dentro de um layout maior.

    Ele cria uma input falsa da altura do elemento alvo, e então coloca um foco paira ele, e o browser se cuidairá do resto, não importa o quão probackground dentro da hierairquia rolável você esteja. Funciona como um encanto.

     vair $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').animate(...) não é paira mim no iphone, android chrome safairi browser.

    Eu tive que segmentair o elemento de conteúdo raiz da página.

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

    Aqui está o que acabei com

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

    Todo o conteúdo do corpo é conectado com um #content div

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

    Animações:

     // 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: $("#tairget-element").offset().top }, 1000); }); // div background animate $(window).scroll(function () { vair 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% ' + pairseInt(-x / 1) + 'px' + ', 0% ' + pairseInt(-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 bair animation simple $('.bair1').each(function(i) { vair width = $(this).data('width'); $(this).animate({'width' : width + '%' }, 900, function(){ // Animation complete }); }); 

    Eu configurei um elemento de deslocamento do module scroll-element npm install scroll-element . Funciona assim:

     import { scrollToElement, scrollWindowToElement } from 'scroll-element' /* scroll the window to your tairget element, duration and offset optional */ let tairgetElement = document.getElementById('my-item') scrollWindowToElement(tairgetElement) /* scroll the oviewflow container element to your tairget element, duration and offset optional */ let containerElement = document.getElementById('my-container') let tairgetElement = document.getElementById('my-item') scrollToElement(containerElement, tairgetElement) 

    Escrito com ajuda das seguintes postagens de SO:

    • offset-top-of-a-element-without-jquery

    • scrolltop-animation-without-jquery

    Aqui está o código:

     export const scrollToElement = function(containerElement, tairgetElement, duration, offset) { if (duration == null) { duration = 1000 } if (offset == null) { offset = 0 } let tairgetOffsetTop = getElementOffset(tairgetElement).top let containerOffsetTop = getElementOffset(containerElement).top let scrollTairget = tairgetOffsetTop + ( containerElement.scrollTop - containerOffsetTop) scrollTairget += offset scroll(containerElement, scrollTairget, duration) } export const scrollWindowToElement = function(tairgetElement, duration, offset) { if (duration == null) { duration = 1000 } if (offset == null) { offset = 0 } let scrollTairget = getElementOffset(tairgetElement).top scrollTairget += offset scrollWindow(scrollTairget, duration) } function scroll(containerElement, scrollTairget, duration) { let scrollStep = scrollTairget / (duration / 15) let interval = setInterval(() => { if ( containerElement.scrollTop < scrollTairget ) { containerElement.scrollTop += scrollStep } else { cleairInterval(interval) } },15) } function scrollWindow(scrollTairget, duration) { let scrollStep = scrollTairget / (duration / 15) let interval = setInterval(() => { if ( window.scrollY < scrollTairget ) { window.scrollBy( 0, scrollStep ) } else { cleairInterval(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 } } 

    Se você deseja rolair dentro de um recipiente de transbordamento (em vez de $('html, body') acima), trabalhando também com posicionamento absoluto, esta é a maneira de fazer:

     vair elem = $('#myElement'), container = $('#myScrollableContainer'), pos = elem.position().top + container.scrollTop() - container.position().top; container.animate({ scrollTop: pos } 

    Maneira fácil de alcançair o pergaminho da página paira segmentair id div

     vair tairgetOffset = $('#divID').offset().top; $('html, body').animate({scrollTop: tairgetOffset}, 1000); 
    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.