web-dev-qa-db-fra.com

Comment faire en sorte qu'un élément de menu défile jusqu'à l'en-tête sur la même page?

Je cherche un moyen de créer un élément de menu (dans ce cas, "Contact") qui défile vers le bas de la page d'accueil où se trouvent les informations de contact.

J'ai essayé de créer un élément de menu d'URL externe et de mettre "#contact" dans le champ URl, puis de placer <a name="contact"> </a> dans le code source, mais je n’arrivais pas à le faire fonctionner.

Existe-t-il un moyen de réaliser cela dans Joomla?

joomla-3.xmenucontent
7
Bogowoe

Lors de la création d'ancres, vous devez attribuer le nom en tant qu'ID de l'élément, comme suit:

Lien:

<a href="#contact">Contact</a>

Ancre:

<div id="contact">
  // Your form here
</div>

Lorsque vous cliquez dessus, cela vous mènera à cette ancre. Si vous souhaitez animer la transition avec un défilement régulier, vous pouvez utiliser jQuery, comme suit:

jQuery(document).ready(function($) {

    $('a[href=#contact]').on('click', function(e) {
        e.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top-0}, 500);
    });

});
7
Lodder

Vous pouvez le faire en utilisant jQuery (comme suggéré par Lodder). Voici une solution alternative (de cette réponse à StackOverflow). Placez ce code dans votre index.php fichier:

<script>
var $root = jQuery('html, body');
jQuery('#contact').click(function() {
    var href = jQuery.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 2000, function () {
        window.location.hash = href;
    });
    return false;
});  
</script>

De plus, si vous avez besoin que l'élément de menu fonctionne à partir de n'importe quelle partie de votre site (si vos informations de contact ne sont visibles que sur la page d'accueil), mettez ceci dans l'URL de votre élément de menu:

index.php/#contact
3
johanpw