Effet scrolling entre les ancres

[Minie]

Bonjour,

Je ne suis pas super calée en javascript mais j'ai essayé de mettre a mon site joomla un effet de scrolling entre les ancres d'une page, ca ne marche pas, c'est pourquoi je suis la, peut être une incompatibilité avec joomla ou autre, ou meme une faute dans mon code ?

Existe t'il une extension qui contient ce javascript qui pourrait éventuellement simplifier la tache ? je n'en ai pas trouvé.

Voici mon code a tout hasard :

$(document).ready(function(){
	$('a[href^=#]').click(function(){
		cible=$(this).attr('href');
		if($(cible).length>=1){
			hauteur=$(cible).offset().top;
		}
		else{
			hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]".offset().top;
		}
		$('html,body').animate({scrollTop:hauteur},2000,'easeInOutCirc');
		return false;
	});
});

Et voici les liens vers la base jquery utilisée (pas sur d'avoir la bonne version) et le plugin Que j'ai chargé dans l'ordre base JQuery, plugin, mon code sur ma page index.

<script type="text/javascript" src="http://web-and-creations.com/templates/web-and-creations/js/jquery.js"></script>
  <script type="text/javascript" src="http://web-and-creations.com/templates/web-and-creations/js/easing.js"></script>
  <script type="text/javascript" src="http://web-and-creations.com/templates/web-and-creations/js/scroll.js"></script>

Problème: lorsqu'il est chargé il supprime mon Slideshow qui utilise aussi du javascript et ne fonctionne pas pour autant.

Si quel'un à un chemin a me montrer merci d'avance

[ghazal]

Re : Effet scrolling entre les ancres

Salut,
peut-être n'as-tu pas suffisamment cherché ?
--> Search - Joomla! Extensions Directory

http://extensions.joomla.org/search?q=anchor

Ce plugin est gratuit :
jQSmoothTop - Joomla! Extensions Directory

http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/24957

et parait faire le boulot correctement.

Quand on introduit du JS dans joomla 2.5, plusieurs pb peuvent apparaitre :
* conflit avec Mootools
* autre version de jQuery dans le template ou une extension
* JS mal intégré dans l'ordre de chargement des fichiers JS
* etc ...

L'essentiel de ces soucis disparaissent avec la version 3.X, basée, pour l'essentiel, sur jQuery.
La future version stable 3.3 devrait même être quasiment totalement "débarrassée" de l'autre librairie Mootools.

[Minie]

Re : Effet scrolling entre les ancres

Merci pour ta réponse rapide, je me rend compte par cette occasion que je me suis trompée de forum, j'ai joomla version 3.2 et non 2.5, ce n'est pas trop grave le plugin que tu ma link est compatible avec ma version meme si ce n'est pas vraiment ce que je cherche.

Celui ci permet uniquement de revenir en haut de pages avec une image qui apparaît en bas, je cherche à relier les ancres d'une pages entre autre avec un mini sommaire.

Certains on l'air similaires sur la piste que tu m'a donné je vais explorer par la.

[ghazal]

Re : Effet scrolling entre les ancres

OK.
Discussion déplacée dans la bonne section.

Tu as un exemple de ton scroll hors joomla à montrer ?

[Minie]

Re : Effet scrolling entre les ancres

Voici un lien vers un exemple : Lien

Je ne suis pas spécialement attachée a cette animation en particulier je suis juste entrain d'explorer cette piste car tous les plugins sont payant, ce qui ne me dérange pas en soit mais n’étant pas bilingue je n'aime pas trop payer sans être sur de ce que j’achète le premier plugin payant avait l'air pas mal mais on dirait seulement un abonnement. 3 mois 12 € pour un script que je pourrais faire moi même (Enfin si j'y arrive)

La version 2.1.0 est bien la dernière de Jquery ?

[Minie]

Re : Effet scrolling entre les ancres

Avec ce code :

$(document).ready(function(){
    // au clic sur un lien
    $('a').on('click', function(evt){
       // bloquer le comportement par défaut: on ne rechargera pas la page
       evt.preventDefault(); 
       // enregistre la valeur de l'attribut  href dans la variable target
	var target = $(this).attr('href');
       /* le sélecteur $(html, body) permet de corriger un bug sur chrome 
       et safari (webkit) */
	$('html, body')
       // on arrête toutes les animations en cours 
       .stop()
       /* on fait maintenant l'animation vers le haut (scrollTop) vers 
        notre ancre target */
       .animate({scrollTop: $(target).offset().top}, 1000 );
    });
});

+ La base JQuery que j'ai, ca supprime carrément toute activité de mes liens, ancres ou liens externes y compris mon menu

Edit: en supprimant "evt.preventDefault(); " j'ai réactiver les liens mais l'animation ne se fait toujours pas c'est pourtant tout con ><

[ghazal]

Re : Effet scrolling entre les ancres

3 mois 12 € pour un script que je pourrais faire moi même (Enfin si j'y arrive)

Absolument d'accord.

Une petite technique pour gérer du JS dans joomla
- sans passer par un plugin ou un module spécialisé dans l'insertion JS
- sans devoir charger à chaque fois la librairie, ce qui est le cas si l'appel à la lib est inséré dans l'index.php du template
- avec la possibilité d'utiliser une librairie CDN, cad chargée extérieurement via un serveur CDN
- en chargeant la lib à la fin du document


Sur un template sans framework (comme Protostar, par ex.).
1- dans l'index.php, insérer un jdoc:include avant </body>

<jdoc:include type="modules" name="endbody" style="none" />
</body>
</html>

*** si tu utilises un template associé à un framework type Gantry, ou autre, et que tu as des difficultés
--> demande ici

2 - créer un module "Contenu personnalisé "

3- lui attribuer la position "endbody"
NB : masquer le titre aussi

4 - insérer l'appel à la lib et le script dépendant
dans ton cas :

<script type="text/javascript" charset="utf-8" src="templates/tontemplate/js/scrollto.js"></script>

ou

<script type="text/javascript" charset="utf-8">
//ton script scrollto
</script>

**même chose avec les fichiers CSS
Si le fait qu'un fichier CSS soit placé en fin de document t'embête, refait l'opération avec une expression jdoc du style :

<jdoc:include type="modules" name="endhead" style="none" />

Expression à placer juste au dessus de </head>, évidemment.


*** pas besoin de rajouter la lib jQuery qui est déjà chargée

5 - Publier

6 - Créer un article.
Ne pas oublier d'insérer le code html lié au JS

Pour un meilleur controle de l'affichage du module, attribuer un lien de menu à l'article.

NB : Je colle également un Read more avant la partie html concernant le script, pour ne pas l'afficher dans le cas d'un article dépendant d'une catégorie en Blog

7 - Associer le module au lien de menu de l'article

Et voila.

Juste pour ton info :
il existe deux serveurs CDN de JS où l'on trouve quasiment toutes les libs :

http://cdnjs.cloudflare.com

http://cdnjs.com/

[ghazal]

Re : Effet scrolling entre les ancres

Si ce scrollto ne fonctionne toujours pas/ou entraine des soucis avec l'affichage d'autres éléments, 2 raisons récurrentes :
* les css à modifier parce qu'elles croisent d'autres CSS avec les mêmes noms de sélecteurs
* le code JS utilise des fonctionnalités pas raccord avec joomla (le # pose souvent des soucis)

Mais il en existe d'autres ...

[Minie]

Re : Effet scrolling entre les ancres

Merci beaucoup pour tes explication, personnellement je chargeais les script en fin de page grâce à l’insertion de code source, tout à la fin de mon article. Pour le Template je l'ai fait moi même sans intégrer de js de base.

Juste avant ta réponse j'ai acheté l'un des plugin, pour 3€ (Lien)

Je viens tout juste de l'installer on peu dans les options modifier le temps de l'animation mais pas l'effet ease, mais c'est déjà mieux qu'une ancre classique.