Scorrere fino a un div usando jquery

quindi ho una pagina che ha una barra di collegamento fissa sul lato. Mi piacerebbe scorrere verso le diverse div. Fondamentalmente la pagina è solo un sito lungo, dove mi piacerebbe scorrere a diverse div usando la casella del menu a lato.

Ecco la jquery che ho finora

$(document).ready(function() { $('#contactlink').click = function() { $(document).scrollTo('#contact'); } }); 

Il problema è che passa automaticamente al contatto div quando viene caricato, quindi quando premo il #contactlink nel menu scorre verso l’alto.

EDIT: HTML

      <script src = "assets/js/jquery.js">  <script src = "assets/js/pagetwo.js"> <link rel="stylesheet" type="text/css" href="assets/css/reset.css" />  <link rel="stylesheet" type="text/css" href="assets/css/pagetwo.css"/>  <!-- Insert Title -->   

uck

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Projects

Projects

Resume

Resume

Contact

Contact

Grazie per l’aiuto

Innanzitutto, il tuo codice non contiene un div di contact , ha un div di contacts !

Nella barra laterale hai un contact nel div in fondo alla pagina che hai contacts . Ho rimosso la s finale per il codice di esempio. (hai anche scritto male l’ projectslink projectlink nella barra laterale).

In secondo luogo, dare un’occhiata ad alcuni degli esempi per fare clic sulla pagina di riferimento di jQuery. Devi usare clic come, object.click( function() { // Your code here } ); per associare un gestore di eventi click all’object …. Come nell’esempio seguente. Per inciso, puoi anche triggersre un clic su un object usandolo senza argomenti, come object.click() .

Terzo, scrollTo è un plugin in jQuery. Non so se hai installato il plugin. Non è ansible utilizzare scrollTo() senza il plug-in. In questo caso, la funzionalità che desideri è solo 2 righe di codice, quindi non vedo alcun motivo per utilizzare il plug-in.

Ok, ora su una soluzione.

Il codice sottostante scorrerà fino al div corretto se si fa clic su un collegamento nella barra laterale. La finestra deve essere abbastanza grande da consentire lo scorrimento:

 // This is a functions that scrolls to #{blah}link function goToByScroll(id) { // Remove "link" from the ID id = id.replace("link", ""); // Scroll $('html,body').animate({ scrollTop: $("#" + id).offset().top }, 'slow'); } $("#sidebar > ul > li > a").click(function(e) { // Prevent a page reload when a link is pressed e.preventDefault(); // Call the scroll function goToByScroll(this.id); }); 

Esempio dal vivo

(Scorri fino alla funzione presa da qui )


PS: Ovviamente dovresti avere una ragione convincente per seguire questa rotta invece di usare i tag di ancoraggio blahblah title

Non esiste alcun metodo .scrollTo() in jQuery, ma esiste uno .scrollTop() . .scrollTop aspetta un parametro, ovvero il valore in pixel in cui deve scorrere la barra di scorrimento.

Esempio:

 $(window).scrollTop(200); 

scorrerà la finestra (se c’è abbastanza contenuto in essa).

Quindi puoi ottenere questo valore desiderato con .offset() o .position() .

Esempio:

 $(window).scrollTop($('#contact').offset().top); 

Questo dovrebbe far scorrere l’elemento #contact in vista.

Il metodo alternativo non jQuery è .scrollIntoView() . Puoi chiamare questo metodo su qualsiasi DOM element come:

 $('#contact')[0].scrollIntoView(true); 

true indica che l’elemento è posizionato nella parte superiore mentre false lo posizionerebbe nella parte inferiore della vista. La cosa bella con il metodo jQuery è che puoi persino usarlo con fx functions come .animate() . Quindi potresti arrotondare qualcosa.

Riferimento: .scrollTop () , .position () , .offset ()

Puoi provare :

 $("#MediaPlayer").ready(function(){ $("html, body").delay(2000).animate({ scrollTop: $('#MediaPlayer').offset().top }, 2000); }); 

Aggiungi questa piccola funzione e usala in questo modo: $('div').scrollTo(500);

 jQuery.fn.extend( { scrollTo : function(speed, easing) { return this.each(function() { var targetOffset = $(this).offset().top; $('html,body').animate({scrollTop: targetOffset}, speed, easing); }); } }); 

OK ragazzi, questa è una piccola soluzione, ma funziona bene.

supponiamo il seguente codice:

 
1st post
2nd post
3rd post

vuoi quando un nuovo post viene aggiunto a “the_div_holder”, quindi scorre il suo contenuto interno (il .post di div) all’ultimo come una chat. Quindi, fai quanto segue ogni volta che un nuovo .post viene aggiunto al detentore principale:

 var scroll = function(div) { var totalHeight = 0; div.find('.post').each(function(){ totalHeight += $(this).outerHeight(); }); div.scrollTop(totalHeight); } // call it: scroll($('#the_div_holder')); 

Prima prendi la posizione dell’elemento div su cui vuoi scorrere con il metodo jQuery position ().
Esempio: var pos = $ (“div”). Position ();
Quindi ottieni le coordinate (altezza) di quell’elemento con il metodo ” .top “.
Esempio: pos.top;
Quindi ottieni i parametri x di quell’elemento div con il metodo ” .left “.
Questi metodi sono originati dal posizionamento CSS.
Una volta ottenute le coordinate x e y, possiamo usare lo scrollTo () di javascript ; metodo.
Questo metodo scorre il documento fino ad altezza e larghezza specifiche.
Prende due parametri come x & y coordinati. Sintassi: window.scrollTo (x, y);
Quindi basta passare le coordinate x & y dell’elemento DIV nella funzione scrollTo () .
Fare riferimento all’esempio di seguito ↓ ↓

     Scroll upto Div with jQuery.       
The DIV element.