Force scrolling sur une site one page

Version imprimable

04/04/2017, 22h31
AroundStick

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

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 :calim2:
06/04/2017, 13h31
mathieu

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 ?

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:

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:

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