Accès aux ID des div

Bonjour tout le monde.

Je ne suis pas trés doué en JavaScript et là, je sèche complètement.

J'ai fais (en recopiant un script sur le net) un scroll dans ma page. Je place les codes en bout de topic.

Dans la function scrollContent il appelle un div passé en paramettre (ça j'ai compris) et ensuite, à partir du Div il appelle un autre div avec le GetElementsByTagName. Et là, je comprends pas pourquoi il ne va pas chercher le div directement ?

Ce que j'ai pu constater c'est que si je met un DIV dans mon contenu, le scroll ne fonctionne plus correctement et ne descend plus jusqu'en bas, mais jusqu'en bas du div à l'intérieur. Voilà pour le premier point.

Le deuixème point est lié (à mon avis) : je voudrais mettre un lien dans mon contenu qui fait descendre le scroll jusqu'à un certains point, un peu comme une ancre.
Alors je me suis dis qu'en faisant une nouvelle function qui va prendre le DIV global en paramettre (comme la function scrollContent) et chercher un autre contrôle, en prenant son top, je peux repositionner le Div Global.
Jusque là, ça me parait logique. Sauf que, je ne peux pas utiliser un div, sinon, je scroll plus.
J'ai essayé de placer un span, histoire de capter son TOP, mais sans succès.

Bref, me voilà bien désapointé. Je sens bien que je suis pas loin de la vérité, mais je bloque sur la gestion des accès aux éléments.

Pouvez vous m'aider ?

Script :

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
 
<script type="text/javascript">
        var STARTINGOPACITY = 40;
        var SCROLLTIMER = 20;
        var SCROLLSPEED = 15;
        // handles manual scrolling of the content //
        function scrollContent(id, dir) {
            var div = document.getElementById(id);
            clearInterval(div.timer);
            var sections = div.getElementsByTagName('div');
            var length = sections.length;
            var limit;
            if (dir == -1) {
                limit = 0;
            } else {
                if (length > 1) {
                    limit = sections[length - 1].offsetTop;
                } else {
                    limit = sections[length - 1].offsetHeight - div.parentNode.offsetHeight + 20;
                }
            }
            //div.style.opacity = STARTINGOPACITY * .01;//
            //div.style.filter = 'alpha(opacity=' + STARTINGOPACITY + ')';//
            div.timer = setInterval(function() { scrollAnimate(div, dir, limit) }, SCROLLTIMER);
        }
 
        function scrollAnimate(div, dir, limit) {
            div.style.top = div.style.top || '0px';
            var top = div.style.top.replace('px', '');
            if (dir == 1) {
                if (limit - Math.abs(top) <= SCROLLSPEED) {
                    cancelScroll(div.id);
                    div.style.top = '-' + limit + 'px';
                } else {
                    div.style.top = top - SCROLLSPEED + 'px';
                }
            } else {
                if (Math.abs(top) - limit <= SCROLLSPEED) {
                    cancelScroll(div.id);
                    div.style.top = limit + 'px';
                } else {
                    div.style.top = parseInt(top) + SCROLLSPEED + 'px';
                }
            }
        }
        // cancel the scrolling on mouseout //
        function cancelScroll(id) {
            var div = document.getElementById(id);
            //div.style.opacity = 1;//
            //div.style.filter = 'alpha(opacity=100)';//
            clearTimeout(div.timer);
        }
    </script>

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="slider">
                        <div class="slidercontent" id="textslider">
                          <div id="textsection" class="section">
MON CONTENU QUI GLISSE
                          </div>
                        </div>
                        <div style="text-align:left;width:18px;position:relative;top:0px;left:782px;background-image:url('/Image/FondBarre.png');background-repeat:repeat-y;background-position:left top;height:382px;">
                        <img alt="Monter le Texte" src="/Image/Haut.png" onmouseover="scrollContent('textslider',-1)" onmouseout="cancelScroll('textslider')"/></div>
                        <div style="text-align:right;width:18px;position:relative;top:0px;left:782px;">
                        <img alt="Descendre le Texte" src="/Image/Bas.png" onmouseover="scrollContent('textslider',1)" onmouseout="cancelScroll('textslider')"/></div>
                    </div>

Salut,

le script que tu as trouvé part d'une bonne intention, mais t'impose une lourde contrainte : tu ne dois pas utiliser de <div> dans ton code pour autre chose que du scroll.
Pour donner plus de souplesse à la chose, je propose de donner une classe aux éléments ciblables par le scroll, que nous appelerons scroll-target, et de remplacer

Code:

getElementsByTagName('div');

par

Code:

getElementsByClassName('scroll-target');

Ainsi, tu pourras scroller vers tous les éléments portant la classe.

Code:

<span class="scroll-target"> … </span>

Reste à régler un « léger problème » d’intercompatibilité : la méthode getElementsByClassName n’existe que chez les meilleurs (!) navigateurs, il faut donc la coder « à la main » quand elle n’est pas disponible…
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 if (!document.getElementsByClassName) { document.getElementsByClassName = function( className ) { var collection = []; // tableau à renvoyer function recursiveSearch( node ) { if (node.hasChildNodes) { if (node.className.indexOf(className) > -1) { // si le node a la bonne classe, on le rajoute collection.push(node); }; // on regarde les enfants var children = node.childNodes; for (var i = 0, l = children.length; i < l; i++) { var child = children[i]; if (child.nodeType == 1) { // type 1 : élément ; le texte pur et // les commentaires ne nous intéressent pas recursiveSearch(child); }; }; }; }; // on commence avec le <body> recursiveSearch(document.body); return collection; }; };
;)

Merci beaucoup pour ton aide.

C'est beaucoup plus fluide comme ça et surtout, j'ai compris comment ça marchait.

Bonne continuation à toi.