web-dev-qa-db-fra.com

Faites défiler jusqu'à une section ou un module

Oui, je sais que cela a déjà été demandé, mais je ne parviens pas à obtenir de réponse des solutions proposées. J'essaie de créer l'un des éléments de mon menu principal pour accéder à certaines sections de mon site Web. Le code que j'utilise et que j'ai inséré juste avant la fermeture de la balise body est comme indiqué

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

La section que j'essaie de faire défiler est la bannière # t3. Sur l'élément de menu (que j'ai créé en tant que menu externe), j'ai ajouté le # t3-banner dans la section des liens. Mais cela ne semble pas fonctionner. Je ne suis pas très bon en requête. Est-ce que quelqu'un ici pourrait m'aider s'il vous plait.Le site est ceci Et le menu est laissé nous chasse pour vous

jqueryjoomla-3.4
2
Paul

Votre sélecteur jQuery('#t3-banner') est incorrect. Cela devrait être un sélecteur pour votre <a>, Qui a l'attribut href="#t3-banner".

Cela fonctionnerait avec ceci:

jQuery(document).ready(function($){
    var $root = $('html, body');
    $('a[href^="#"]').click(function(e) {
        // Don't follow the link, orherwise it would jump to section without animation
        e.preventDefault();

        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top
        }, 2000, function () {
            window.location.hash = href;
        });
    });
});

Le code doit être dans jQuery(document).ready, car l'écouteur d'événements ne peut être ajouté que si DOM est prêt.

Il sélectionne tous les éléments <a>, Ce qui a # Dans href.

NOTE: Attention, il faut TOUS les éléments <a> Sur la page entière. Si vous ne le souhaitez que pour le menu, vous devez préciser votre sélecteur.

Par exemple, si votre wrapper de menu a l'ID menu, il pourrait alors s'agir de jQuery('#menu a[href^="#"]').

Vous pouvez jeter un oeil sur ma réponse sur "Comment créer un modèle à page unique?". Peut-être clarifie un peu les choses.

2
Rene Korss