Wie kann ein Menüelement zur Überschrift auf derselben Seite gescrollt werden?

Ich suche nach einer Möglichkeit, einen Menüpunkt (in diesem Fall "Kontakt") zu erstellen, der zum Ende meiner Homepage rollt, auf der sich die Kontaktinformationen befinden.

Ich habe versucht, ein externes URL-Menüelement zu erstellen und "#contact" in das URl-Feld einzufügen und dann <a name="contact"> </a>in den Quellcode einzufügen , aber ich konnte es nicht zum Laufen bringen.

Gibt es Möglichkeiten, dies in Joomla zu erreichen?

Wenn Sie Anker erstellen, müssen Sie den Namen wie folgt als ID des Elements zuweisen:

Verknüpfung:

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

Anker:

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

Wenn Sie darauf klicken, gelangen Sie zu diesem Anker. Wenn Sie den Übergang mit einem glatten Bildlauf animieren möchten, können Sie jQuery wie folgt verwenden:

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

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

});

Sie können dies mit jQuery tun (wie von Lodder vorgeschlagen). Hier ist eine alternative Lösung (aus dieser Antwort bei StackOverflow). Fügen Sie diesen Code in Ihre index.phpDatei ein:

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

Wenn Sie außerdem möchten, dass der Menüpunkt von einem beliebigen Teil Ihrer Website aus funktioniert (falls Ihre Kontaktinformationen nur auf der Startseite sichtbar sind), fügen Sie diesen in Ihre Menüpunkt-URL ein:

index.php/#contact