Scorrimento fluido per div id jQuery

Ho cercato di ottenere una scroll per div id codice jquery per funzionare correttamente. Sulla base di un’altra domanda di overflow dello stack ho provato quanto segue

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() { $.scrollTo($('#myDiv'), 1000); }); 

Ma non ha funzionato. Si aggancia al div. Ho anche provato

 $('#myButton').click(function(event) { event.preventDefault(); $.scrollTo($('#myDiv'), 1000); }); 

Senza progressi.

Hai bisogno di animare l’ html, body

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

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

Se vuoi sovrascrivere la navigazione href-id standard sulla pagina senza modificare il markup HTML per uno scorrimento fluido , usa questo ( esempio ):

 // handle links with @href started with '#' only $(document).on('click', 'a[href^="#"]', function(e) { // target element id var id = $(this).attr('href'); // target element var $id = $(id); if ($id.length === 0) { return; } // prevent standard hash navigation (avoid blinking in IE) e.preventDefault(); // top position relative to the document var pos = $id.offset().top; // animated top scrolling $('body, html').animate({scrollTop: pos}); }); 

ecco i miei 2 centesimi:

Javascript:

 $('.scroll').click(function() { $('body').animate({ scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70) }, 1000); }); 

html:

 Contact 

e l’objective:

 

Contact

Ecco cosa uso:

   

Il bello con questo è che puoi usare un numero illimitato di hash-link e id corrispondenti senza dover eseguire un nuovo script per ciascuno.

Se utilizzi WordPress, inserisci il codice nel file footer.php del tema subito prima del tag body di chiusura .

Se non si ha accesso ai file del tema, è ansible incorporare il codice direttamente nell’editor di post / pagina (è necessario modificare il post in modalità Testo) o su un widget Testo che verrà caricato su tutte le pagine.

Se utilizzi un altro CMS o solo HTML, puoi inserire il codice in una sezione che viene caricata su tutte le pagine subito prima del tag body di chiusura .

Se hai bisogno di maggiori dettagli su questo, controlla il mio post veloce qui: jQuery scorrere liscio a id

Spero che questo aiuti e fammi sapere se hai domande a riguardo.

sei sicuro di aver caricato il file jQuery scrollTo Plugin?

potresti avere un object: errore “scrollTo” trovato nella console.

il metodo scrollTO non è un metodo jquery nativo. per usarlo è necessario includere lo scroll jquery per il file di plugin.

ref: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

soln: aggiungi questo nella sezione della testa.

  

un esempio in più:

Link HTML:

 Learn More 

JS:

  $(".scrollTo").on('click', function(e) { e.preventDefault(); var target = $(this).attr('href'); $('html, body').animate({ scrollTop: ($(target).offset().top) }, 2000); }); 

Ancoraggio HTML:

   

Questo script è un miglioramento della sceneggiatura di Vector. Ho fatto un piccolo cambiamento ad esso. Quindi questo script funziona per ogni link con la pagina di class: scorri in esso.

All’inizio senza attenuazione:

 $("a.page-scroll").click(function() { var targetDiv = $(this).attr('href'); $('html, body').animate({ scrollTop: $(targetDiv).offset().top }, 1000); }); 

Per facilitare l’utilizzo dell’interfaccia utente di Jquery:

  

Aggiungi questo alla sceneggiatura:

 'easeOutExpo' 

Finale

 $("a.page-scroll").click(function() { var targetDiv = $(this).attr('href'); $('html, body').animate({ scrollTop: $(targetDiv).offset().top }, 1000, 'easeOutExpo'); }); 

Tutti gli easings che puoi trovare qui: Cheat Sheet .

Puoi farlo usando il seguente semplice codice jQuery.

Esercitazione, demo e codice sorgente possono essere trovati da qui – Scorrimento fluido per div usando jQuery

JavaScript:

 $(function() { $('a[href*=#]:not([href=#])').click(function() { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.substr(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } }); }); 

HTML:

 Go Section 1 

Qui ho provato questo, che funziona benissimo per me.

$ (‘a [href * = “#”]’). on (‘click’, function (e) {e.preventDefault ();

 $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top }, 500, 'linear'); 

});

HTML:

FAST FOOD

Scorri qui …