Joomla.it Forum
Joomla! 3 => Joomla! 3 => : peppeirace 15 Jul 2014, 10:22:54
-
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
-
si, devi cercare com realizzare uno "smooth scroll". puoi farlo con jquery.
Vedi esempio:
<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>
-
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
-
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.
-
..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
-
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.
-
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
-
ma in quell'articolo questo lavoro sta già fatto, tu che cosa vuoi aggiungere?
-
...l'effetto smoot scroll
-
allora incolla solo lo script dentro il template poco prima del tag </body>
-
...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
-
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 $
<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...
-
...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
-
è 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
-
ok, ora riprovo
grazie
-
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
-
ciao
no, non ho risolto, mi sono arreso
peppeirace
-
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
-
grazie
ci provo
-
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