Problème avec df Javascript Smooth Scroll

Fermé
skpflz Messages postés 18 Date d'inscription jeudi 31 janvier 2008 Statut Membre Dernière intervention 25 octobre 2013 - 31 janv. 2008 à 17:20
skpflz Messages postés 18 Date d'inscription jeudi 31 janvier 2008 Statut Membre Dernière intervention 25 octobre 2013 - 26 mai 2010 à 17:21
Bonjour,

et au secours... j'essaye d'installer smooth scroll (http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll/), mais je n'y arrive pas, les balises fonctionnent, mais pas l'animation, alors que les démos sont OK sur les mêmes navigateurs. Après avoir tenté toutes sortes de variantes, j'en suis revenue aux indications de départ, voilà:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head>
<STYLE type="text/css">A {text-decoration: none;}</STYLE>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta HTTP-EQUIV="imagetoolbar" CONTENT="no">
<meta name="language" content="fr">
<meta name="robots" content="index, follow">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<SCRIPT LANGUAGE="javascript"><!--
<script src="smoothscroll.js" type="text/javascript">

Scroller = {
// control the speed of the scroller.
// dont change it here directly, please use Scroller.speed=50;
speed:10,

// returns the Y position of the div
gy: function (d) {
gy = d.offsetTop
if (d.offsetParent) while (d = d.offsetParent) gy += d.offsetTop
return gy
},

// returns the current scroll position
scrollTop: function (){
body=document.body
d=document.documentElement
if (body && body.scrollTop) return body.scrollTop
if (d && d.scrollTop) return d.scrollTop
if (window.pageYOffset) return window.pageYOffset
return 0
},

// attach an event for an element
// (element, type, function)
add: function(event, body, d) {
if (event.addEventListener) return event.addEventListener(body, d,false)
if (event.attachEvent) return event.attachEvent('on'+body, d)
},

// kill an event of an element
end: function(e){
if (window.event) {
window.event.cancelBubble = true
window.event.returnValue = false
return;
}
if (e.preventDefault && e.stopPropagation) {
e.preventDefault()
e.stopPropagation()
}
},

// move the scroll bar to the particular div.
scroll: function(d){
i = window.innerHeight || document.documentElement.clientHeight;
h=document.body.scrollHeight;
a = Scroller.scrollTop()
if(d>a)
if(h-d>i)
a+=Math.ceil((d-a)/Scroller.speed)
else
a+=Math.ceil((d-a-(h-d))/Scroller.speed)
else
a = a+(d-a)/Scroller.speed;
window.scrollTo(0,a)
if(a==d || Scroller.offsetTop==a)clearInterval(Scroller.interval)
Scroller.offsetTop=a
},
// initializer that adds the renderer to the onload function of the window
init: function(){
Scroller.add(window,'load', Scroller.render)
},

// this method extracts all the anchors and validates then as # and attaches the events.
render: function(){
a = document.getElementsByTagName('a');
Scroller.end(this);
window.onscroll
for (i=0;i<a.length;i++) {
l = a[i];
if(l.href && l.href.indexOf('#') != -1 && ((l.pathname==location.pathname) || ('/'+l.pathname==location.pathname)) ){
Scroller.add(l,'click',Scroller.end)
l.onclick = function(){
Scroller.end(this);
l=this.hash.substr(1);
a = document.getElementsByTagName('a');
for (i=0;i<a.length;i++) {
if(a[i].name == l){
clearInterval(Scroller.interval);
Scroller.interval=setInterval('Scroller.scroll('+Scroller.gy(a[i])+')',10);
}
}
}
}
}
}
}
// invoke the initializer of the scroller
Scroller.init();


/*------------------------------------------------------------
* END OF CODE
/*-----------------------------------------------------------*/
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>

<body bgcolor="#333333" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<a name="top">Smooth scrolling demo</a>
<div id="conteneur" style="position:absolute; z-index:1; width: 801px; height: 1793px; left: 0px" class="conteneur">
<div id="menu" style="position:absolute; width:149px; height:244px; z-index:2; left: 0px; top: 222px" class="menu"><img src="images/menugauche.jpg" width="149" height="244" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="6,-1,144,35" href="index.html">
<area shape="rect" coords="6,34,144,63" href="02.html">
<area shape="rect" coords="7,91,144,121" href="04.html">
<area shape="rect" coords="5,120,142,150" href="05.html">
<area shape="rect" coords="6,148,141,180" href="06.html">
<area shape="rect" coords="5,179,143,209" href="07.html">
<area shape="rect" coords="6,208,141,241" href="#" onclick="MM_openBrWindow('','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes')">
</map>
</div>
<div id="fond" style="position:absolute; width:576px; height:1772px; z-index:3; left: 225px; top: 7px" class="fond">
</div>
<div id="titre" style="position:absolute; width:576px; height:466px; z-index:4; left: 225px; top: 7px" class="titre"><img src="images/03jpg" width="576" height="466"></div>
<div id="texte" style="position:absolute; width:544px; z-index:6; left: 239px" class="texte">


<a href="#top">HAUT DE PAGE</a> - <a href="index.html">RETOUR A LA PAGE
D'ACCUEIL</a> <br>
<br>
<br>

</div>
<div id="bas" style="position:absolute; width:576px; height:14px; z-index:5; left: 225px; top: 1779px" class="bas"></div>

<div id="legend" style="position:absolute; z-index:7; left: 494px; top: 97px" class="legend"><font color="#FFFFFF">Né


</div>
</body>
</html>

merci d'avance!
A voir également:

2 réponses

Essaye cet autre script de scroll doux.
Celui-là c'est sûr il marche :

https://reactdom.com/restful-api/
1
skpflz Messages postés 18 Date d'inscription jeudi 31 janvier 2008 Statut Membre Dernière intervention 25 octobre 2013
26 mai 2010 à 17:21
Merci pour le lien! Je me réjouis de tester!
0