jQuery scorrere fino all'elemento

2328

Ho questo inputelemento:

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

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

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

L'ultimo elemento della pagina è un submitpulsante 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.

javascript jquery scroll

— DiegoP.
fonte

3

developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

— Christophe Roussy

scrollToè stato disabilitato per me a causa di un plugin Chrome, non sono sicuro di quale.

— Jacksonkr,

4025

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

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

Ho ottenuto il codice dall'articolo Scorri senza problemi fino a un elemento senza un plug-in jQuery . E l'ho provato sull'esempio seguente.

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

Espandi frammento

— Steve
fonte

24

Questo non funzionerà in tutti i casi. Vedere stackoverflow.com/questions/2905867/...

— Jānis Elmeris

7

@BarryChapman non esattamente. Dopo aver cercato su google ho trovato questo , quindi entrambi i tag sono necessari se non si desidera avere una logica aggiuntiva per tipo di browser.

— s3m3n,

73

Se non si desidera l'animazione e si desidera passare immediatamente all'elemento, utilizzare .scrollTop(…)invece di .animate({scrollTop: …}, …).

— Rory O'Kane,

11

Oltre alla tua soluzione (che funziona alla grande), puoi aggiungere una funzione completa che aggiunge l'hashtag all'URL. In questo caso non scorrerà, perché scrollTo ha già fatto scorrere nella posizione corretta, e se un utente copia l'URL si aggancerà automaticamente al posto giusto sulla pagina.

— Sander,

10

se si utilizza un callback per l'esecuzione al termine dell'animazione e si nota che il callback si attiva due volte con questa soluzione, provare a utilizzare "$ ('html body'). animate (..." anziché "$ ('html, body') .animate (..." la virgola ha creato due eventi animati uno per html, una per il corpo si vuole veramente solo per il corpo html Grazie @TJ Crowder.. stackoverflow.com/questions/8790752/...

— BoatCode

526

jQuery .scrollTo (): View - Demo, API, Source

Ho scritto questo plugin leggero per rendere molto più semplice lo scorrimento di pagine / elementi. È flessibile dove è possibile passare un elemento target o un valore specificato. Forse questo potrebbe far parte della prossima uscita 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 la destinazione di scorrimento.

durata : una stringa o un numero che determina per quanto tempo durerà l'animazione.

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

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

— Timothy Perez
fonte

2

Funzionava fino a un recente aggiornamento su Chrome. Ho una versione che funziona attualmente su memoryboxweddings.com/photography-posts (se vuoi provarlo). Pubblicherò un aggiornamento una volta risolto.

— Timothy Perez,

Risolto, risulta che in realtà era un file JS di jquery.com che lo stava uccidendo. Dovrebbe funzionare ora se lo provi.

— Timothy Perez,

4

@TimothyPerez: sono sicuro che ciò significhi qualcosa di permissivo per uso commerciale? Sono sicuro che ci sono molte persone che vorrebbero usare quel frammento di codice ovunque nei loro siti Web e che li aiuterebbero a dormire un po 'più facilmente di notte? Forse qualcosa come la licenza MIT potrebbe soddisfare le tue esigenze? en.wikipedia.org/wiki/MIT_License

— Robert Massaioli

13

$ ('body') non ha funzionato in FF, quindi ha provato $ ('html, body') che ha funzionato.

— Kirirvj,

5

Se qualcuno ha bisogno di questa fonte di script, qui puoi ottenerla flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

— Arturs,

370

Se non sei molto interessato all'effetto di scorrimento uniforme e ti interessa solo scorrere fino a un elemento particolare, non hai bisogno di alcune funzioni 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) viene utilizzato perché vogliamo recuperare l'elemento DOM di JavaScript e non l'elemento DOM di JQuery.

— Atharva
fonte

12

Potresti anche usare $(selector)[0]?

— RobW

16

RobW, sì, puoi semplicemente usare [0], ma get (0) ti protegge da indici indefiniti o negativi. Vedi la fonte: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get

— corbacho

21

Se non vuoi usare jQuery, usa semplicemente document.getElementById('#elementID').scrollIntoView(). Inutile caricare una libreria ~ 100k solo per selezionare un elemento e convertirlo in JavaScript normale.

— Gavin,

62

@Gavin Sono sicuro che intendevi che fosse:document.getElementById('elementID').scrollIntoView()

— Brian,

3

Freddo. Ma prima di utilizzare, assicurati che il browser supporti questo. Secondo Mozilla "Questa è una tecnologia sperimentale"

— Tejasvi Hegde,

48

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 animerà all'ID. Se non viene trovato il tag hash, ignora lo script.

— Warface
fonte

$(window.location.hash)non funzionerà per gli hash che non soddisfano il rilevamento ID regex di jQuery. Ad esempio, hash che contengono numeri. È anche un po 'pericoloso; il formato dell'input deve essere convalidato in modo da non selezionare un altro elemento.

— Dchacke,

35

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>

Espandi frammento

— davidcondrey
fonte

1

Per renderlo più universale e rimuovere il posizionamento non necessario di hashtag nella finestra dei collegamenti del browser, ho appena modificato il codice come di seguito:

jQuery(document).ready(function($) {   $(document).on( "click", 'a[href^="#"]', function( e ) {     e.preventDefault();     var target = this.hash,         $target = $(target);    $('html, body').stop().animate({ scrollTop: $target.offset().top - 100}, 1000);   }); });

— bubencode

31

La soluzione di Steve e Peter funziona molto bene.

Ma in alcuni casi, potrebbe essere necessario convertire il valore in un numero intero. Stranamente, il valore restituito da $("...").offset().topè talvolta in float.
Uso:parseInt($("....").offset().top)

Per esempio:

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

— Tejasvi Hegde
fonte

22

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

— Rezgar Cadro
fonte

22

Questo è il modo in cui lo faccio.

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

Funziona con qualsiasi browser.

Può essere facilmente inserito in una funzione

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

Ecco un esempio funzionante

$(".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>

Espandi frammento

Documenti

— Edvard Åkerberg
fonte

6

Abbastanza corto e dolce. Una cosa da notare: penso che questo lo faccia scorrere solo in vista (potrebbe trovarsi nella parte inferiore della finestra) anziché scorrere fino alla cima della finestra, come fa l'impostazione scrollTop.

— OG Sean,

20

Conosco un modo senza jQuery:

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

Modifica: Sono passati due anni e sto ancora ottenendo casualmente reputazione da questo post lmao

— GameMaster1928
fonte

18

Se si sta gestendo solo lo scorrimento verso 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 segnalato!

— Benjamin Oakes
fonte

17

Con questa soluzione non è necessario alcun plug-in e non è necessaria alcuna installazione oltre a posizionare lo script prima del </body>tag di chiusura .

$("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 è presente un hash nell'indirizzo, lo scorreremo fino a esso.

E - ogni volta che si fa clic su un acollegamento con un hrefhash #top, ad esempio , si scorre fino ad esso.

— Jonathan
fonte

Probabilmente questo dovrebbe essere > 1invece di 0, solo perché /#provoca la rottura di questo script

— Tallboy,

Tecnicamente non dovresti finire con un URL hash vuoto a meno che i link non siano costruiti male ma TY. (anche se la mia versione di questo codice ha già questa patch inclusa ^^)

— Jonathan il

C'è un jitter associato a questo codice, tuttavia è facilmente risolvibile. È necessario alla return false;fine dell'evento al clic per impedire che si verifichi l'azione predefinita, che scorre immediatamente fino all'ancoraggio.

— Roncli,

2

@roncli buon punto - in alternativa puoi semplicemente faree.preventDefault();

— Jonathan

e.preventDefault()comunque non aggiorna l'hash

— nell'URL

8

Nella maggior parte dei casi, sarebbe meglio usare un plugin. Sul serio. Ho intenzione di pubblicizzare il mio qui . Naturalmente ce ne sono anche altri. Ma per favore controlla se evitano davvero le insidie per le quali vorresti in primo luogo un plugin - non tutti lo fanno.

Ho scritto dei motivi per usare un plugin altrove . In poche parole, l'unica fodera alla base della maggior parte delle risposte qui

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

è cattivo UX.

L'animazione non risponde alle azioni dell'utente. Continua anche se l'utente fa clic, tocca o prova a scorrere.
Se il punto iniziale dell'animazione è vicino all'elemento target, l'animazione è dolorosamente lenta.
Se l'elemento di destinazione viene posizionato nella parte inferiore della pagina, non può essere fatto scorrere verso l'alto della finestra. L'animazione di scorrimento si interrompe bruscamente quindi, a metà movimento.

Per gestire questi problemi (e molti altri ), puoi usare un mio plugin, jQuery.scrollable . La chiamata diventa quindi

$( window ).scrollTo( targetPosition );

e basta. Certo, ci sono più opzioni .

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

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

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

— hashchange
fonte

8

animazioni:

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

8

Se vuoi scorrere all'interno di un contenitore di overflow (invece di $('html, body')rispondere sopra), lavorando anche con un posizionamento assoluto, questo è il modo di fare:

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

container.animate({
  scrollTop: pos
}

— fajir
fonte

7

Modo semplice per ottenere lo scorrimento della pagina per div id target

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

— Irshad Khan
fonte

6

Questo è il mio approccio che estrae gli ID e gli href, usando un selettore di classe generico

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

Espandi frammento

— vascogaspar
fonte

6

Plugin jQuery personalizzato molto semplice e facile da usare. Basta aggiungere l'attributo scroll=all'elemento cliccabile e impostarne il valore sul selettore che si desidera scorrere.

In questo modo: <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>

— DevWL
fonte

4

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

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

— kayz1
fonte

4

$('html, body').animate(...) non per me su iPhone, browser Safari Chrome Android.

Ho dovuto scegliere come target l'elemento di contenuto principale della pagina.

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

Ecco cosa ho finito

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>

— Shahdat
fonte

Non dovresti davvero usare lo sniffing dell'agente utente. webaim.org/blog/user-agent-string-history

— Alex Podworny,

Aggiungi word-break: break-all; al tuo elemento CSS in difficoltà. Webview Android / iOS jQuery.animate ({scrollTop: y}) posizione errata. medium.com/@ellery.leung/…

— daliaessam

4

Questa è la risposta di Atharva da: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView . Volevo solo aggiungere se il tuo documento è in un iframe, puoi scegliere un elemento nel frame principale per scorrere in vista:

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

— cynya
fonte

3

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

3

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 uno scorrimento 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();
});

Questo scorrerà prima fino a #submit poi ripristinare il cursore sull'input che è stato cliccato, il che simula uno scorrimento verso il basso e funziona sulla maggior parte dei browser. Inoltre non richiede jQuery in quanto può essere scritto in puro JavaScript.

Questa modalità di utilizzo della focusfunzione può imitare l'animazione in un modo migliore, attraverso il concatenamento delle focuschiamate. 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>

— Khaled.K
fonte

3

Ho impostato un elemento scroll del modulo 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 }
}

— svnm
fonte

2

Per mostrare l'intero elemento (se possibile con la dimensione 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);

— Roman Shamritskiy
fonte

2

Ho scritto una funzione per scopi generici che scorre su 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);
};

— isapir
fonte

2

Per quello che vale, è così che sono riuscito a ottenere un simile comportamento per un elemento generale che può essere all'interno di un DIV con scorrimento. Nel nostro caso non facciamo scorrere l'intero corpo, ma solo elementi particolari con overflow: auto; all'interno di un layout più ampio.

Crea un input falso dell'altezza dell'elemento target, quindi si concentra su di esso e il browser si occuperà del resto, non importa quanto in profondità all'interno della gerarchia scorrevole tu sia. Funziona come un fascino.

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

— martinh_kentico
fonte

2

Questo ha funzionato per me:

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

— Polaris
fonte

2

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>

Espandi frammento

— Minguocode
fonte

2

Oneliner

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

Mostra snippet di codice

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>

Espandi frammento

— Kamil Kiełczewski
fonte

1

funziona perfettamente!

— jjoselon,

1

Risposta aggiornata a partire dal 2019:

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

— stardust4891
fonte

Dovresti selezionare questo selettore per body: [document.documentElement, document.body] AND Non è necessario un offset del corpo nell'equazione. $ ('# subject'). offset (). top è sufficiente.

— ali6p,