Ancre smoth scroll

[dinoule]

Bonjour

 

Excusez-moi j'ai une question assez débutante mais je bloque dessus.

 

En fait j'ai mis dans mon fichier product.tpl un div qui amène sur un autre div de la page avec l'utilisation de l'ancre.

J'aimerais que le défilement soit doux donc smooth scroll.

J'ai essayé d'abord de mettre en bas de la page un script avec litteral que j'ai pu trouver dans mes recherche et de mettre la classe correspondante dans mon élément <a>.

 

1. Cela ne fonctionne pas est ce que vous pourriez dans un premier temps m'aider à faire marcher ceci.

 

2. Et dans un deuxième temps on m'a conseillé comme ceci :

"mais il faut que le js soit asynchrone, donc dans un plugin pour que ce soit propre et qu'il soit bien minifié et chargé après le code"

Pourriez-vous me donner des indications précises par rapport à cela ?

 

 

Pour voir à quoi ressemble mon code la fin du fichier product.tpl:

        {block name='page_footer_container'}
            <footer class="page-footer">
                {block name='page_footer'}
                    <!-- Footer content -->
                {/block}
            </footer>
        {/block}
        </div>
    </section>
{/block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

{literal}
<script>

$(document).ready(function() {

$('.js-scrollTo').on('click', function() { 

var page = $(this).attr('href');

var speed = 1000;

$('html, body').animate( { scrollTop: $(page).offset().top }, speed );

return false;

});

});

</script>
{/literal}

 

 

et mon "bouton"

{block name='voirdetail'}
                            <div> 
                                <a href="#ancre" class = "btn rouge js-scrollTo"> 
                                    <span>  Voir les détails </span> 
                                </a>
                            </div>
                         {/block}

 

qui renvoie ici

        <div  id="ancre"> </div>

 

 

Merci pour votre aide
 

 

 

Edited February 27, 2020 by dinoule (see edit history)