it-swarm.dev

Come far scorrere una voce di menu fino all'intestazione nella stessa pagina?

Sto cercando un modo per creare una voce di menu (in questo caso "Contatto") che scorre fino alla fine della mia home page dove si trovano le informazioni di contatto.

Ho provato a creare una voce di menu URL esterna e ho inserito "#contact" nel campo URl, quindi posizionare <a name="contact"> </a> nel codice sorgente, ma non sono riuscito a farlo funzionare.

Ci sono modi per raggiungere questo obiettivo in Joomla?

7
Bogowoe

Quando si creano ancore, è necessario assegnare il nome come ID dell'elemento, in questo modo:

Link:

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

Anchor:

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

Quando si fa clic, ti porterà a questo ancoraggio. Se desideri animare la transizione con uno scorrimento uniforme, puoi usare jQuery, in questo modo:

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

Puoi farlo usando jQuery (come suggerito da Lodder). Ecco una soluzione alternativa (da questa risposta su StackOverflow). Inserisci questo codice nel tuo index.php file:

<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>

Inoltre, se hai bisogno che la voce di menu funzioni da qualsiasi parte del tuo sito (nel caso in cui le tue informazioni di contatto siano visibili solo sulla homepage), inseriscile nell'URL della voce di menu:

index.php/#contact
3
johanpw