scroll intempestif

Bonjour à tous!

J'ai un probleme dans un site en cours de developpement...

J'ai un module d'affichage de news sur la homepage, avec un petit script en Jquery qui permet d'afficher les news successivement, en utilisant des fadeIn et des fadeOut.

Tout fonctionne bien, le probleme est que , si je descend en bas de la page, a chaque changement d'affichage de news le page remonte automatiquement a mi hauteur...

Je n'utilise pas d'ancre de type href="#" , je ne comprend pas d'ou cela peu venir...

Vous pouvez voir le phenomene sur :
h t t p : / / w w w . s u p a c a t s . c o m / h o m e . a s px
(Merci de ne pas inserer de liens en dur, je ne voudrais pas ke le petit google bot vienne trop tot)

Pour information voici les sources associées :

Le html

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
55
56
57
58
 
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        InitTopNews('.ContentNews');
    });
</script>
 
<h1 class="topNews">News :</h1>
<div class="ContentNews"> 
<asp:Repeater runat="server" ID="rptNews">
<ItemTemplate>
<div id='<%#String.Format("News-{0}",Container.ItemIndex) %>'>
<table>
<tr>
<td>
<itool:ExtendImage runat="server" ID="imgNewsTop" ImageUrl='<%#Eval("Avatar.Url") %>' CssClass="imgTopNews" Cache="true" Thumb="Crop" ThumbHeight="210" ThumbWidth="320" Height="210" Width="320" AlternateText='<%#Eval("Avatar.Titre") %>' />
</td>
<td>
<h2><%#Eval("Titre")%></h2>
<%#GetTexteTronque(DataBinder.GetDataItem(Container)) %>
<br /><br />
<span class="Italic">
Posté <%#Convert.ToDateTime(Eval("date")).ToString("le dd/MM/yyyy à HH\\hmm") %>
</span>
<asp:Panel runat="server" ID="LireLaNews" Visible='<%# Eval("texte").ToString().Length > 50 ? false:true %>'>
<br />
<img src="/Masters/img/FlecheDroiteLien.gif" />&nbsp;<tool:JSHyperLink runat="server" ID="JSHyperLink9" NavigateUrl='<%#Eval("Url") %>'>Lire la news</tool:JSHyperLink>
</asp:Panel>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
<table>
<tr>
<td>
<table cellspacing="5" class="NewsPager">
<tr>
<td onclick="SelectTopNews(0);">1</td>
<td onclick="SelectTopNews(1);">2</td>
<td onclick="SelectTopNews(2);">3</td>
<td onclick="SelectTopNews(3);">4</td>
<td onclick="SelectTopNews(4);">5</td>
<td onclick="SelectTopNews(5);">6</td>
<td onclick="SelectTopNews(6);">7</td>
<td onclick="SelectTopNews(7);">8</td>
<td onclick="SelectTopNews(8);">9</td>
<td onclick="SelectTopNews(9);">10</td>
</tr>
</table>
</td>
<td class="AlignRight">
<img src="/Masters/img/FlecheDroiteLien.gif" />&nbsp;<tool:JSHyperLink runat="server" ID="JSHyperLink9" NavigateUrl='/actualites-news'>Consulter les archives</tool:JSHyperLink>
</td>
</tr>
</table>
</div>

Le jQuery

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
 
var IndiceTopNews = 0;
var Minuterie;
function InitTopNews(selector) {
    HideAll();
    $('table.NewsPager td').attr('class', '');
    $(selector + ' #News-0').show();
    $('table.NewsPager td:first').attr('class', 'selected');
    SelectNextTopNews();
}
 
function SelectTopNews(indice) {
    window.clearTimeout(Minuterie);
    $('#News-' + IndiceTopNews).fadeOut(500, function() {
        HideAll();
        $('table.NewsPager td').attr('class', '');
        $('#News-' + indice).fadeIn(500);
        $('table.NewsPager td:eq(' + indice + ')').attr('class', 'selected');
        IndiceTopNews = indice;
    });
}
 
function SelectNextTopNews() {
    $('#News-' + IndiceTopNews).fadeOut(500, function() {
        HideAll();
        IndiceTopNews = IndiceTopNews + 1;
        if (IndiceTopNews == 10)
            IndiceTopNews = 0;
        $('table.NewsPager td').attr('class', '');
        $('#News-' + IndiceTopNews).fadeIn(500);
        $('table.NewsPager td:eq(' + IndiceTopNews + ')').attr('class', 'selected');
        Minuterie = setTimeout(function() { SelectNextTopNews() }, 2000);
    });
}
 
function HideAll() {
    $('#News-0').hide();
    $('#News-1').hide();
    $('#News-2').hide();
    $('#News-3').hide();
    $('#News-4').hide();
    $('#News-5').hide();
    $('#News-6').hide();
    $('#News-7').hide();
    $('#News-8').hide();
    $('#News-9').hide();
}

Le css

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
h1.topNews
{
    background-image:url(/Masters/img/TopNews_Top.png);
    background-repeat:no-repeat;
    height:17px;
    width:571px;
    color: #fcd800;
    font-size: 14px;
    padding:15px;
    margin:0px;
}
 
div.ContentNews
{
    background:#E0E1E2;
    color:Black;
    border-left:solid 3px Black;
    border-right:solid 3px Black;
    width:575px;
    padding:10px;
    margin-bottom:10px;
}
 
div.ContentNews table
{
    width:100%;
}
 
div.ContentNews table.NewsPager
{
    width:auto;
    margin-top:5px;
}
 
div.ContentNews table.NewsPager tr td
{
    background:#A88900;
    border:solid 1px #E2B500;
    width:20px;
    color:White;
    text-align:center;
    cursor:pointer;
}
 
div.ContentNews table.NewsPager tr td:hover
{
    background:#FFC700;
    border:solid 1px #FFE284;
    width:20px;
    color:White;
    text-align:center;
    cursor:pointer;
}
 
div.ContentNews table.NewsPager tr td.selected
{
    background:#FFC700;
    border:solid 1px #FFE284;
    width:20px;
    color:White;
    text-align:center;
    cursor:pointer;
}
 
.imgTopNews
{
    border:solid 1px Black;
}

[EDIT]
J'ai debugger le jquery avec firebug et apparemment c'est au moment de l'appel a la fonction fadeIn() que sa remonte dans la page.

[EDIT]
J'ai enfin reussi à regler mon probleme, il faut utiliser fadeTo a la place des fadin / fadeout

Sa joue sur l'opacité au lieu de faire des display none donc pa de scroll intempestif

Pour ceux que sa peu interesser....

(J'ai trouver la solution sur un blog jquery anglais je sais plus l'adresse)