jquery liscia scorrere fino a un’ancora?

C’è un modo per scorrere verso il basso fino a un collegamento di ancoraggio usando jQuery?

Piace:

$(document).ready(function(){ $("#gotomyanchor").click(function(){ $.scrollSmoothTo($("#myanchor")); }); }); 

?

Ecco come lo faccio:

  var hashTagActive = ""; $(".scroll").on("click touchstart" , function (event) { if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll. event.preventDefault(); //calculate destination place var dest = 0; if ($(this.hash).offset().top > $(document).height() - $(window).height()) { dest = $(document).height() - $(window).height(); } else { dest = $(this.hash).offset().top; } //go to destination $('html,body').animate({ scrollTop: dest }, 2000, 'swing'); hashTagActive = this.hash; } }); 

Quindi devi solo creare il tuo ancoraggio in questo modo:

 Destination 1 

Puoi vederlo sul mio sito web .
Una demo è disponibile anche qui: http://jsfiddle.net/YtJcL/

Vorrei usare il semplice frammento di codice da CSS-Tricks.com:

 $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); 

Fonte : http://css-tricks.com/snippets/jquery/smooth-scrolling/

La soluzione migliore che ho visto finora: jQuery: Smooth Scrolling Internal Anchor Links

HTML:

 Scroll to comments 

script:

 jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); }); }); 

jQuery.scrollTo farà tutto quello che vuoi e di più!

Puoi passargli tutti i tipi di cose diverse:

  • Un numero grezzo
  • Una stringa (’44 ‘,’ 100px ‘,’ + = 30px ‘, ecc.)
  • Un elemento DOM (logicamente, figlio dell’elemento scorrevole)
  • Un selettore, che sarà relativo all’elemento scorrevole
  • La stringa ‘max’ per scorrere fino alla fine.
  • Una stringa che specifica una percentuale per scorrere fino a quella parte del contenitore (ad esempio: il 50% passa a * al centro).
  • Un hash {top: x, left: y}, xey può essere qualsiasi tipo di numero / stringa come sopra.

Ecco il codice che ho usato per bind rapidamente jQuery scrollTo a tutti i link di ancoraggio:

 // Smooth scroll $('a[href*=#]').click(function () { var hash = $(this).attr('href'); hash = hash.slice(hash.indexOf('#') + 1); $.scrollTo(hash == 'top' ? 0 : 'a[name='+hash+']', 500); window.location.hash = '#' + hash; return false; }); 

Volevo una versione che funzionasse per e

  

Prova questo. È un codice trucchi CSS che ho modificato, è piuttosto semplice e consente sia lo scorrimento orizzontale che verticale. Ha bisogno di JQuery. Ecco una demo

 $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top-10, scrollLeft:target.offset().left-10 }, 1000); return false; } } }); }); 

Usando lo script di hanoo ho creato una funzione jQuery:

 $.fn.scrollIntoView = function(duration, easing) { var dest = 0; if (this.offset().top > $(document).height() - $(window).height()) { dest = $(document).height() - $(window).height(); } else { dest = this.offset().top; } $('html,body').animate({ scrollTop: dest }, duration, easing); return this; }; 

utilizzo:

 $('#myelement').scrollIntoView(); 

I valori predefiniti per durata e attenuazione sono 400 ms e “swing”.

Ho usato nel mio sito questo:

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

});

Puoi cambiare la velocità dello scrolling cambiando il “1200” che ho usato di default, funziona abbastanza bene sulla maggior parte dei browser.

dopo aver inserito il codice tra il della pagina, sarà necessario creare il collegamento interno nel tag :

 Go to Home 

Spero che sia d’aiuto!

Ps: non dimenticare di chiamare:

Ho usato il plugin Smooth Scroll , su http://plugins.jquery.com/smooth-scroll/ . Con questo plugin tutto ciò che devi includere è un collegamento a jQuery e al codice del plugin:

   

(i collegamenti devono avere la class smoothScroll per funzionare).

Un’altra caratteristica di Smooth Scroll è che il nome di ancor non è visualizzato nell’URL!

lavori

 $('a[href*=#]').each(function () { $(this).attr('href', $(this).attr('href').replace('#', '#_')); $(this).on( "click", function() { var hashname = $(this).attr('href').replace('#_', ''); if($(this).attr('href') == "#_") { $('html, body').animate({ scrollTop: 0 }, 300); } else { var target = $('a[name="' + hashname + '"], #' + hashname), targetOffset = target.offset().top; if(targetOffset >= 1) { $('html, body').animate({ scrollTop: targetOffset-60 }, 300); } } }); }); 

Odio aggiungere classi con nome funzione al mio codice, quindi lo metto insieme. Se dovessi smettere di usare lo scrolling regolare, mi sentirei felice di leggere il mio codice e cancellare tutte le cose di tipo “scroll” di class. Usando questa tecnica, posso commentare 5 linee di JS e gli aggiornamenti del sito intero. 🙂

 Smooth Smooth ... ... 
...

Requisiti :
1. Gli elementi devono avere un attributo href che inizi con # e che sia molto più di #
2. Un elemento nella pagina con un attributo id corrispondente

Cosa fa:
1. La funzione utilizza il valore href per creare l’object anchorID
– Nell’esempio, è $('#contact') , https://stackoverflow.com/about inizia con /
2. HTML e BODY sono animati all’offset superiore di anchorID
– speed = ‘normal’ (‘fast’, ‘slow’, millisecondi,)
– easing = ‘swing’ (‘lineare’, ecc … google easing)
3. return false – impedisce al browser di mostrare l’hash nell’URL
– Lo script funziona senza di esso, ma non è così ” liscio “.