Auto scroll top et bottom

Bonjour,

J'ai fais un code pour faire defiler une liste en bas, alors je me bloque pour retourner en haut DEMO:

Je veux faire de meme, un defilement pour retourner en haut :)

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
 
<ul class="mm" id="list">
    <li>item1</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item3</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item5</li>
    <li>item</li>    
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item8</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>    
    <li>item</li>
    <li>item</li>
    <li>item10</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item15</li>
</ul>

Code:

1
2
3
4
5
6
7
8
 
.mm {
  overflow-y:scroll; 
  height: 150px; 
  border: 1px solid black;
  list-style-type: none;
  padding: 0px;
}

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
 
var yy = $('.mm').scrollTop();
console.log(yy);
var sh	= $('.mm')[0].scrollHeight;
console.log(sh);
 
 
$('#list > li').hover(function(e){
var target = e.target;
//console.log(target);
var height = $('ul').height();
console.log('h '+height);
 
var scrollHeight = $("#list")[0].scrollHeight;
console.log(scrollHeight);
 
var off = $('#list').offset();
console.log(off);
 
var offTop = $('#list').offset().top;
console.log(offTop);
 
var offLeft = $('#list').offset().left;
console.log(offLeft);
 
 
	var mouseX = e.pageX;
  var mouseY = e.pageY;
 
  console.log('x:'+mouseX+' y:'+mouseY+ ' h:'+height+' sh:' +scrollHeight);
 
  if(mouseY > height-10){
 
    $('#list').animate({scrollTop: '+=150px'}, 1500, 'swing');
  }
 
 
 
});

Merci a vous

pourquoi ne pas faire la condition "if(mouseY > height - 16)" au sein de la fonction callback de animate?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 $('#list > li').mouseenter(function(e) {//mouseenter est plus performante que hover.
  var target = e.target;
  var height = $('ul').height();
  var mouseY = e.pageY;
 
  $('#list').animate(null, function() {
    if (mouseY > height - 16) {//-16 au lieu de -10 pcq les ul ont un margin et un padding de 16px, tu as mis padding:0 au niveau de css mais tu as oublié le margin
      $(this).animate({
        scrollTop: "+=150px"
      }, 1500, 'swing');
 
    } else
      $(this).animate({
        scrollTop: "-=150px"
      }, 1500, "swing");
  });
 
});

Oui effectivement ça m'est échappée, merci à vous