Jump to content

Recommended Posts

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 by dinoule (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More