IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Force scrolling sur une site one page


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre à l'essai Avatar de AroundStick
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2017
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2017
    Messages : 4
    Par défaut Force scrolling sur une site one page
    Bonjour !

    Je suis sur un site en one-page avec scrolling sur la bonne section depuis le menu du site.
    Je voudrais que si l'utilisateur navigue sur la page, que mon script force le scrolling sur la section la plus proche.
    Je n'ai pas vraiment d'exemple à montrer parce que je ne sais pas trop par où commencer

    J'aurai surtout besoin qu'on m'aiguille, je pensais récupérer la position grâce à une fonction de type "$(window).scrollTop()" pour voir où l'utilisateur se situe sur mon site, de récupérer la position de ma div "section" la plus proche et de forcer le scrolling. Vous en pensez quoi ?

    Merci d'avance

    P.S : Je précise, je suis sur une reprise de site web en "wordpress" et j'utilise le plugin "jQuery UI Widgets". Je peux pas me permettre de refaire tout le site donc faut que je me débrouille avec ce que j'ai

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 666
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 666
    Par défaut
    pour déplacer l'affichage vers une section, cela devrait suffire de lui donner le focus :
    http://api.jquery.com/focus/

    par contre je n'ai pas compris à quel moment vous souhaitez que ce déplacement se fasse ?

  3. #3
    Membre à l'essai Avatar de AroundStick
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2017
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2017
    Messages : 4
    Par défaut
    Salut !

    En fait j'ai trouvé la solution sur slack avec une fonction appelé sur l'event "mousewheel".
    En ajoutant une info "data" à mes div.

    HTML :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div id="accueil" data-scrollBolock></div>
    <div id="qui-sommes-nous" data-scrollBolock></div>
    <div id="devenir-proprietaire" data-scrollBolock></div>
    <div id="contactez-nous" data-scrollBolock></div>
    JS :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
     
    $(document).on('mousewheel ', function(e) {
     
      jumpToDiv(e);
     
    });
     
    function jumpToDiv(e)
    {
     //e.preventDefault(); /** optional, you might want to try it **/
     
     
     
      /** elements to bounce to: **/
      var $elements = $("div[data-scrollBolock]"); 
     
      /** get the next/previous element based on the scrolling direction: **/
      var $elementToScrollTo = $elements.eq(0);
      var scrollDirection = "down";
      if (e.originalEvent.wheelDelta >= 0) {
        scrollDirection = "up";
        $elements = $($elements.get().reverse());
      }
     
      $elements.each(function() {
        var scrollTop = $(window).scrollTop(),
          elementOffset = $(this).offset().top,
          distance = (elementOffset - scrollTop);
        if (scrollDirection === "down") {
          if (distance > 0) {
            $elementToScrollTo = $(this);
            return false;
          }
        } else {
          if (distance < 0) {
            $elementToScrollTo = $(this);
            return false;
          }
        }
      });
     
     
      /** scrollTo $elementToScrollTo but only if the user stopped scrolling **/
      clearTimeout($.data(this, 'scrollTimer'));
      $.data(this, 'scrollTimer', setTimeout(function() { //user stopped scrolling
        scrollTo($elementToScrollTo);
      }, 80));
    }
     
    function scrollTo($el) {
      $('html,body').animate({
        scrollTop: $($el).offset().top
      }, 500);
    }
    Bref ça fait bien ce que je veux, quand l'utilisateur utilise la molette ça descend/remonte au niveau de la div suivante/précédente etc...

    Merci quand même

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Envoyer une position de scroll sur une autre page
    Par TLOH45 dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 24/11/2011, 14h43
  2. Problème de Scroll sur Une TStringGrid en mode saisie
    Par Delphi-ne dans le forum Delphi
    Réponses: 5
    Dernier message: 23/10/2006, 09h50
  3. Scrolling sur une ListBox
    Par dede92 dans le forum Windows
    Réponses: 2
    Dernier message: 02/06/2006, 18h56
  4. [HTML] click lien sur une cellule et page qui s'ouvre dans une autre cellule
    Par mariogarcia dans le forum Balisage (X)HTML et validation W3C
    Réponses: 26
    Dernier message: 24/05/2006, 14h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo