SMOOTH-SCROLLING est-il possible?

[castellodimonteluco]

Bonjour je suis un ami jimdo italienne. Merci de me avoir acceptée sur ce forum. Je cherche une solution pour rendre plus doux le "SCROLL" du site vers le bas. Je ai inséré bien des points ancrés d'arrivée et links de départ associé, mais ne savez pas où et comment insérer le code javascript. Voici un exemple de "SMOOTH-SCROLL" = https://css-tricks.com/examples/SmoothPageScroll/. Quelqu'un peut me aider se il vous plaît? Merci beaucoup! ALFREDO

[FredVig]

C'est une question intéressante : Les effets smooth scroll sont habituellement obtenus à l'aide de jQuery.
Or, nous évitons d'utiliser jQuery pour des raisons de rapidité et de compatibilité.
Il doit être possible de créer le même effet que celui utilisé par le bouton "vers le haut", qui est un mouvement fluide. Mais je ne sais pas comment le "récupérer".

[castellodimonteluco]

Merci beaucoup pour votre réponse. Je espère que nous pouvons trouver un moyen d'avoir SMOOTH-SCROLL sur un template normal Jimdo parce que je ai vu que de nombreux sites ont Jimdo ce mouvement doux. Avez-vous une idée? ALFREDO

[FredVig]

Je suis parvenu à un résultat. voir un exemple sur mon site, cliquez sur "Ancre : aller à "changer la couleur du texte".
Pour réaliser cela…
Créer une ancre sur la page comme cela est expliqué aide de base jimdo :ancre.
Vous aurez, une fois fait,
- un lien vers l'ancre :

Code:

<a title="#nomDeVotreAncre" href="#nomDeVotreAncre"  data-mce-href="#nomDeVotreAncre">Ancre : aller à "nomDeVotreAncre"</a>

- et une ancre ailleurs sur la page dans un module html :

Code:

<a name="nomDeVotreAncre" id="nomDeVotreAncre"></a>

Ajoutez en tête de votre site, grâce à "modifier le Head", (en premier, avant toute modification du Head) cette fonction javascript :

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
 $(document).ready(function() {
 $('.scrollTo').click( function() { // Au clic sur un élément
 var page = $(this).attr('href'); // Page cible
 var speed = 750; // Durée de l'animation (en ms)
 $('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
 return false;
 });
 });
</script>


Revenez dans le texte qui renvoi à l'ancre, et modifiez son html de façon à lui attribuer une class "scrollTo".

Code:

<p><a title="#nomDeVotreAncre" href="#nomDeVotreAncre" class="scrollTo">Ancre : aller à "nomDeVotreAncre"</a></p>

hupupup… Barbatruc !
Explications détaillées :
http://www.design-fluide.com/17-11-2013/un-defilement-anime-smooth-scroll-en-jquery-sans-plugin/

[castellodimonteluco]

Merci beaucoup pour cette suggestion, mais je suis vraiment sur le terrain pour la programmation, codes, etc.Je pourrais expliquer étape par étape, comme avec un enfant comment devriez-vous faire? Avez-vous vu l'exemple que je ai entré ci-dessus? (http://www.matrix-themes.com/)Quel est votre site, vous parliez? Merci et désolé à nouveau!

[castellodimonteluco]

OK Ok ... Je ai vu tranquillement demain je essaie d'arriver à la solution. Vous avez vérifié que cela fonctionne sur certains site Jimdo? Merci beaucoup

[FredVig]

Ce genre de modification demande un minimum de connaissance html, et de structure Jimdo.
Je pense avoir donné toute information nécessaire… pour une personne ayant les connaissances pré-requises.
Mon site est en lien, il suffit de cliquer sur le texte lié "smooth-scrolling"

[castellodimonteluco]

FANTASTIC je ai vu votre site ... Je vais faire!

[dozy3.com]

Merci FredVig pour l'explication. Je confirm qui fonctionne en plain.

Ciao Alfredo,

Rispetto al codice che avevamo trovato devi modificare il codice HTML dell'ancora aggiungendo il parametro di classe, quindi diventa

Code:

<a class="scrollTo" href="#nome-della-sezione">Vai a Nome della sezione</a>

Il codice fornito da FredVig va inserito così come riportato nella zona "modifica head" del sito, prima però di tutti gli altri elementi che puoi aver già inserito.

[FredVig]

En tout cas, merci d'avoir posé la question, car je n'aurai jamais cherché une telle fonction !
Maintenant, je sais faire ça aussi…

[castellodimonteluco]

merci beaucoup maintenant la page glisse doucement vers le point ancrée! un grand merci à FredVig (France) et DOZY3 (Italie) pour le soin et le souci! Ole ' Regardez ici: http://aristografica.jimdo.com/ ALFREDO

[Solie]

Pour ceux que ça intéressent, Jimdo a agrémenté son aide hier d'un code Java à mettre dans le head pour avoir un effet Smooth scrolling vers les ancres. Il fonctionne à merveille sur nos designs.

Voici le lien :
http://aide.jimdo.com/aller-plus-loin-avec-jimdo/smooth-scrolling/

Merci à Sylvain

La bonne nouvelle, c'est que ce code peut aussi fonctionner sur des images, à condition d'insérer votre image par le biais du module "texte", via le html.

J'ai tenté le truc Voir exemple sur le bouton scroll animé et ça marche nickel ! Même pas besoin de nettoyer la partie Target par la suite...

[Contenu sponsorisé]