javascript - spostare - selezionare più elementi jquery




jQuery scorri fino all'elemento (18)

Ho questo elemento di input :

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

Poi ho altri elementi, come altri input di testo, textareas, ecc.

Quando l'utente fa clic su quell'input con #subject , la pagina dovrebbe scorrere fino all'ultimo elemento della pagina con una bella animazione. Dovrebbe essere una scroll verso il basso e non verso l'alto.

L'ultimo elemento della pagina è un pulsante di submit con #submit :

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

L'animazione non dovrebbe essere troppo veloce e dovrebbe essere fluida.

Sto eseguendo l'ultima versione di jQuery. Preferisco non installare alcun plug-in, ma utilizzare le funzionalità jQuery predefinite per raggiungere questo obiettivo.


Quando l'utente fa clic su quell'input con #subject, la pagina dovrebbe scorrere fino all'ultimo elemento della pagina con una bella animazione. Dovrebbe essere una scroll verso il basso e non verso l'alto.

L'ultimo elemento della pagina è un pulsante di invio con #submit

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

Per prima cosa scorri verso il basso fino a #submit quindi ripristina il cursore sull'input che è stato fatto clic, che imita una scroll down e funziona sulla maggior parte dei browser. Inoltre non richiede jQuery in quanto può essere scritto in puro JavaScript.

Questa modalità di utilizzo della funzione di focus simulare l'animazione in un modo migliore, concatenando le chiamate di focus . Non ho testato questa teoria, ma sarebbe simile a questa:

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

Con questa soluzione non hai bisogno di alcun plugin e non è necessaria alcuna configurazione oltre a mettere lo script prima del </body> chiusura </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);
}

Al caricamento, se c'è un hash nell'indirizzo, scorrono ad esso.

E - ogni volta che fai clic su un link con un hash href ad esempio #top , scorri fino ad esso.


Ho impostato un scroll-element modulo scroll-element npm install scroll-element . Funziona così:

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)

Scritto con l'aiuto dei seguenti messaggi SO:

Ecco il codice:

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

Ho scritto una funzione generica che scorre verso un oggetto jQuery, un selettore CSS o un valore numerico.

Esempio di utilizzo:

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

Il codice della funzione:

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

Nella maggior parte dei casi, sarebbe meglio usare un plugin. Sul serio. Vado qui a miniera qui . Naturalmente ce ne sono anche altri. Ma per favore controlla se davvero evitano le insidie ​​per cui vorrai un plugin in primo luogo - non tutte lo fanno.

Ho scritto sui motivi per l'utilizzo di un plugin elsewhere . In poche parole, l'unica linea guida alla base della maggior parte delle risposte qui

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

è male UX.

  • L'animazione non risponde alle azioni dell'utente. Continua anche se l'utente fa clic, tocca o prova a scorrere.

  • Se il punto di partenza dell'animazione è vicino all'elemento di destinazione, l'animazione è dolorosamente lenta.

  • Se l'elemento obiettivo è posizionato vicino alla parte inferiore della pagina, non può essere spostato nella parte superiore della finestra. L'animazione a scorrimento si interrompe bruscamente quindi, a metà movimento.

Per gestire questi problemi (e elsewhere ), puoi usare un mio plug-in, jQuery.scrollable . La chiamata diventa quindi

$( window ).scrollTo( targetPosition );

e questo è tutto. Certo, ci sono più opzioni .

Per quanto riguarda la posizione di destinazione, $target.offset().top fa il lavoro nella maggior parte dei casi. Ma tieni presente che il valore restituito non tiene conto del bordo dell'elemento html ( vedi questa demo ). Se hai bisogno che la posizione di destinazione sia accurata in qualsiasi circostanza, è meglio usarla

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

Funziona anche se è impostato un bordo sull'elemento html .


Per mostrare l'elemento completo (se è possibile con le dimensioni della finestra corrente):

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

Plugin jQuery personalizzato molto semplice e facile da usare. Basta aggiungere l'attributo scroll= al tuo elemento cliccabile e impostarne il valore sul selettore a cui vuoi scorrere.

Mi piace così: <a scroll="#product">Click me</a> . Può essere utilizzato su qualsiasi 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>


Questo ha funzionato per me:

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

Se non ti interessa molto l'effetto smooth scroll e sei solo interessato a scorrere verso un particolare elemento, non hai bisogno di alcuna funzione jQuery per questo. Javascript ha coperto il tuo caso:

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

Quindi tutto ciò che devi fare è: $("selector").get(0).scrollIntoView();

.get(0) è usato perché vogliamo recuperare l'elemento DOM di JavaScript e non l'elemento DOM di JQuery.


Se si gestisce solo lo scorrimento su un elemento di input, è possibile utilizzare focus() . Ad esempio, se si desidera scorrere fino al primo input visibile:

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

O il primo input visibile in un contenitore con classe .error :

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

Grazie a Tricia Ball per averlo fatto notare!


Supponendo di avere un pulsante con il button id, prova questo esempio:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Ho ottenuto il codice dall'articolo Scorre senza problemi fino a un elemento senza un plugin jQuery . E l'ho provato nell'esempio qui sotto.

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


Una versione compatta della soluzione "animata".

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

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

Utilizzo di base: $('#your_element').scrollTo();


Usando questo semplice script

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

Farebbe in modo che se un tag hash viene trovato nell'URL, lo scrollTo si animi sull'ID. Se non è stato trovato il tag hash, ignorare lo script.


jQuery .scrollTo ():

Ho scritto questo plugin leggero per semplificare lo scorrimento di pagine / elementi. È flessibile in cui è possibile passare un elemento di destinazione o un valore specificato. Forse questo potrebbe essere parte della prossima versione ufficiale di jQuery, cosa ne pensi?

Esempi di utilizzo:

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

Opzioni:

scrollTarget : un elemento, una stringa o un numero che indica la posizione di scorrimento desiderata.

offsetTop : un numero che definisce la spaziatura aggiuntiva sopra il punto di scorrimento.

durata : una stringa o un numero che determina il tempo di esecuzione dell'animazione.

easing : una stringa che indica quale funzione di andamento usare per la transizione.

complete : una funzione da chiamare una volta completata l'animazione.


$('html, body').animate(...) non fa per me su iphone, browser android chrome safari.

Dovevo scegliere come target l'elemento contenuto radice della pagina.

$ ( '# Cotnent'). Animate (...)

Ecco cosa mi sono ritrovato

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

Tutto il contenuto del corpo cablato con un div #content

<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