Scroll on click : ajouter quelques pixels de décallage [Fermé]

Signaler
-
Messages postés
1769
Date d'inscription
jeudi 20 décembre 2007
Statut
Membre
Dernière intervention
19 novembre 2016
-
Bonjour,
Je crée mon site portfolio, tout le contenu n'est que sur une seule page et est organisé en sections. Il y a dans le menu des liens vers les ID des sections.
Je voulais que lorsqu'un internaute clique sur un lien du menu, que le scroll soit délicat et pas d'un seul coup, et aussi que l'ID de la section ne s'ajoute pas dans l'URL.
Pour cela, j'ai trouvé un bout de code qui fonctionne à merveille :
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

Le problème, c'est que mon menu est en position fixed en haut de l'écran, le contenu passe donc derrière celui-ci.
Ce que je cherche à faire, c'est dire, dans le code ci-dessus : "scroll vers la section sur laquelle l'internaute a cliqué, mais 50 pixels au dessus".
Avez-vous une idée de comment je pourrais faire cela ? :)

1 réponse

Messages postés
1769
Date d'inscription
jeudi 20 décembre 2007
Statut
Membre
Dernière intervention
19 novembre 2016
245
Bonjour,

scrollTop: $($anchor.attr('href')).offset().top - 50


Si j'ai bien compris.
Génial, ça fonctionne ! :)

Dernière question : est-ce qu'il est possible de faire en sorte que cette réduction de 50 pixels s'applique à tous les liens sauf un ? (exemple : tous les liens sauf #menu)
Je viens d'y penser, je vais copier coller ce code et changer le nom de la classe ajoutéer, merci encore :)
Messages postés
1769
Date d'inscription
jeudi 20 décembre 2007
Statut
Membre
Dernière intervention
19 novembre 2016
245
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var padding = 0;
        if($(event.target).attr('id') != 'menu')
             padding = 50;
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - padding
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});



Pas eu le temps de tester, mais c'est dans l'idée!