scroll ad una anchor

[peppeirace]

buongiorno e buona estate

ho un articolo molto lungo con diversi paragrafi linkati con un' anchor.
è possibile avere un'effetto di scorrimento tipo i "torna su" quando si clicca su link al paragrafo?

grazie a tutti

peppeirace

[giovi]

si, devi cercare com realizzare uno "smooth scroll". puoi farlo con jquery.

Vedi esempio:

Codice: [Seleziona]

<a href="#services">Link a qualcosa</a>

<div id="services">
Qualcosa
</div>

<script>
$(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
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});
});</script>

[peppeirace]

Grazie Giovi
...tutto questo codice va piazzato ad ogni link all'interno dell'articolo?

link a qualcosa sarebbero le anchor?
Qualcosa è sempre il nome dell'anchor

grazie
peppeirace

[giovi]

lo script va in fondo alla pagina e va adattato in base al resto del codice (es. se va in conflitto con altre librerie e o se stai già usando jquery in no-conflict).
"link a qualcosa" è un anchor generico ad un segnalibro interno alla pagina, "qualcosa" è l'elemento al quale si riferisce l'anchor. Elementi diversi hanno anchor, link ed id diversi.

[peppeirace]

..vediamo se ho capito
creo un ancor con un nome qualunque tipo "top" e scrivo:

<a href="#services">#top[/url]

<div id="services">
top
</div>

...e poi di seguito il resto

poi metto tutto nel codice in fondo all'articolo

[giovi]

no,
incolli solo lo script in fondo alla pagina (opportunamente modificato). L'href è la destinazione dell'anchor e deve essere l'id del contenitore della destinazione preceduto dal cancelletto. Es.


<a href="#domanda3">Link alla domanda 3</a > produrrà un testo "Link alla domanda 3" cliccando sul quale si arriverà al contenuto dell'elemento con id "domanda3".


Lo script è facoltativo, serve solo a rendere l'effetto smooth scroll.

[peppeirace]

scusa ma sono un pò duro
se ti arrendi ti capirò

nell articolo ho 9 anchor (vedi pagina - dopo la prima foto c'è un'elenco con flag linkato con anchor ai vari paragrafi)

http://www.duvaws.it/en/company/quality-and-social-responsability

devo cambiare sistema eliminando le anchor cambiando i link dell'elenco

oppure
devo ripetere per ogni paragrafo
<a href="#domanda1">Link alla domanda1 </a >
<a href="#domanda2">Link alla domanda2 </a >
<a href="#domanda3">Link alla domanda3 </a >
ecc

grazie ancora per la tua pazienza

[giovi]

ma in quell'articolo questo lavoro sta già fatto, tu che cosa vuoi aggiungere?

[peppeirace]

...l'effetto smoot scroll

[giovi]

allora incolla solo lo script dentro il template poco prima del tag </body>

[peppeirace]

...fatto ma senza risultati

ho copiato

<script>
$(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
       }, 900, 'swing', function () {
           window.location.hash = target;
       });
   });
});</script>

e incollato prima di</body> nel file theme.php

grazie ancora
peppeirace

[giovi]

te l'ho detto, devi adattarlo in base alle caratteristiche del template. Alcuni integrano jquery in noconclict ed in quei casi devi utilizzare l'alias jQuery al posto della $

Codice: [Seleziona]

<script>
jQuery(document).ready(function(){
   jQuery('a[href^="#"]').on('click',function (e) {
       e.preventDefault();

       var target = this.hash,
       $target = jQuery(target);

       jQuery('html, body').stop().animate({
           'scrollTop': $target.offset().top
       }, 900, 'swing', function () {
           window.location.hash = target;
       });
   });
});</script>
Comunque non riesco a vedere lo script all'interno del template, controlla che sia il file giusto. theme.php mi sa tanto di wordpress...

[peppeirace]

...il file theme.php credo si aquello giusto, non vedo quale altro possa essere

ho inserito il codice nuovo ma inibisce i link, nel senso che se clikko su na delle voci linkate no va da nessuna parte

grazie ancora
peppeirace

[giovi]

è un buon segno, può voler dire che lo script viene richiamato.
di solito comunque i template utilizzano un file index.php che è sempre presente, si vede che quello che usi è stato convertito da wp.
nella console del broser (F12) puoi vedere anche qual'è l'errore che inibisce il funzionamento dei link

[peppeirace]

ok, ora riprovo

grazie

[Clodius]

Ciao,
hai per caso risolto il problema?


Io uso joomla. Lo script dove dovrei inserirlo? in index.php oppure nel css del template?


Grazie


Ciao

[peppeirace]

ciao
no, non ho risolto, mi sono arreso

peppeirace

[Clodius]

Ciao,


se può ancora interessarti, alla fine ho trovato due soluzioni:
una per joomla, "Smooth Scroll Anchor" che trovi a questo link:



ed una per Wordpress, "jQuery Smooth Scrool" che trovi a questo link
http://www.blogsynthesis.com/plugins/jquery-smooth-scroll/
(Free)


Spero ti sia utile.


Ciao.

edit by Matty80: rimosso riferimento commerciale

[peppeirace]

grazie
ci provo

[luketto]

Ciao peppeiarace, io una cosa così l'ho fatta con autoToc, dovrebbe andare


http://extensions.joomla.org/extensions/news-display/article-elements/articles-toc/11573