bonjour,
je fais un site One Page (ici : www.pleasecallmemadame.com), et j'ai mis en place une fonction ScrollTo en JQuery. Je suis débutant, mais jusqu'ici tout marchait bien ; j'avais le code suivant sur mes liens, qui étaient des images envoyant chacune vers une ancre de la page (ici vers l'ancre "telechargements") :
Depuis, j'ai décidé de mettre mon menu en une seule image, plus esthétique, et d'y mettre des zones cliquables renvoyant vers les mêmes ancres, et mon code est devenu ça (je ne mets qu'une seule zone cliquable, toujours la même, "telechargements", pour la lisibilité) :
Et là, le Scroll ne marche plus. J'ai pensé à la balise <a/> mais je ne trouve pas comment la ré-intégrer... je n'ai pas touché au reste, on appelle bien les scripts en début de header, tout ça, cependant voici le contenu des fichiers .JS :
JQUERY.LOCALSCROLL.JS :
JQUERY.SCROLLTO.JS
Si vous pouviez m'aider ce serait vraiment top, j'ai l'impression d'avoir tout essayé là...
merci !
je fais un site One Page (ici : www.pleasecallmemadame.com), et j'ai mis en place une fonction ScrollTo en JQuery. Je suis débutant, mais jusqu'ici tout marchait bien ; j'avais le code suivant sur mes liens, qui étaient des images envoyant chacune vers une ancre de la page (ici vers l'ancre "telechargements") :
<a href="#telechargements"><img src="http://www.pleasecallmemadame.com/wp-content/uploads/2011/12/telechargements.png" width="161" height="59" /></a>Depuis, j'ai décidé de mettre mon menu en une seule image, plus esthétique, et d'y mettre des zones cliquables renvoyant vers les mêmes ancres, et mon code est devenu ça (je ne mets qu'une seule zone cliquable, toujours la même, "telechargements", pour la lisibilité) :
<img src="http://www.pleasecallmemadame.com/wp-content/uploads/2012/01/menu_etiquettes.png" width="194" height="692" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="34,29,42,22,174,12,183,20,187,42,179,52,46,62,35,54,34,28" href="#telechargements"/>
</map>Et là, le Scroll ne marche plus. J'ai pensé à la balise <a/> mais je ne trouve pas comment la ré-intégrer... je n'ai pas touché au reste, on appelle bien les scripts en début de header, tout ça, cependant voici le contenu des fichiers .JS :
JQUERY.LOCALSCROLL.JS :
;(function( $ ){
var URI = location.href.replace(/#.*/,'');
var $localScroll = $.localScroll = function( settings ){
$('body').localScroll( settings );
};
$localScroll.defaults = {
duration:1000,
axis:'y',
event:'click',
stop:true,
target: window,
reset: true
};
$localScroll.hash = function( settings ){
if( location.hash ){
settings = $.extend( {}, $localScroll.defaults, settings );
settings.hash = false;
if( settings.reset ){
var d = settings.duration;
delete settings.duration;
$(settings.target).scrollTo( 0, settings );
settings.duration = d;
}
scroll( 0, location, settings );
}
};
$.fn.localScroll = function( settings ){
settings = $.extend( {}, $localScroll.defaults, settings );
return settings.lazy ?
this.bind( settings.event, function( e ){
var a = $([e.target, e.target.parentNode]).filter(filter)[0];
if( a )
scroll( e, a, settings );
}) :
this.find('a,area')
.filter( filter ).bind( settings.event, function(e){
scroll( e, this, settings );
}).end()
.end();
function filter(){
return !!this.href && !!this.hash && this.href.replace(this.hash,'') == URI && (!settings.filter || $(this).is( settings.filter ));
};
};
function scroll( e, link, settings ){
var id = link.hash.slice(1),
elem = document.getElementById(id) || document.getElementsByName(id)[0];
if ( !elem )
return;
if( e )
e.preventDefault();
var $target = $( settings.target );
if( settings.lock && $target.is(':animated') ||
settings.onBefore && settings.onBefore.call(settings, e, elem, $target) === false )
return;
if( settings.stop )
$target.stop(true);
if( settings.hash ){
var attr = elem.id == id ? 'id' : 'name',
$a = $('<a> </a>').attr(attr, id).css({
position:'absolute',
top: $(window).scrollTop(),
left: $(window).scrollLeft()
});
elem[attr] = '';
$('body').prepend($a);
location = link.hash;
$a.remove();
elem[attr] = id;
}
$target
.scrollTo( elem, settings )
.trigger('notify.serialScroll',[elem]);
};
})( jQuery );JQUERY.SCROLLTO.JS
;(function( $ ){
var $scrollTo = $.scrollTo = function( target, duration, settings ){
$(window).scrollTo( target, duration, settings );
};
$scrollTo.defaults = {
axis:'xy',
duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1
};
$scrollTo.window = function( scope ){
return $(window).scrollable();
};
$.fn.scrollable = function(){
return this.map(function(){
var elem = this,
isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
if( !isWin )
return elem;
var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
return $.browser.safari || doc.compatMode == 'BackCompat' ?
doc.body :
doc.documentElement;
});
};
$.fn.scrollTo = function( target, duration, settings ){
if( typeof duration == 'object' ){
settings = duration;
duration = 0;
}
if( typeof settings == 'function' )
settings = { onAfter:settings };
if( target == 'max' )
target = 9e9;
settings = $.extend( {}, $scrollTo.defaults, settings );
duration = duration || settings.speed || settings.duration;
settings.queue = settings.queue && settings.axis.length > 1;
if( settings.queue )
duration /= 2;
settings.offset = both( settings.offset );
settings.over = both( settings.over );
return this.scrollable().each(function(){
var elem = this,
$elem = $(elem),
targ = target, toff, attr = {},
win = $elem.is('html,body');
switch( typeof targ ){
case 'number':
case 'string':
if( /^([+-]=)?\d+(\.\d+)?(px)?$/.test(targ) ){
targ = both( targ );
break;
}
targ = $(targ,this);
case 'object':
if( targ.is || targ.style )
toff = (targ = $(targ)).offset();
}
$.each( settings.axis.split(''), function( i, axis ){
var Pos = axis == 'x' ? 'Left' : 'Top',
pos = Pos.toLowerCase(),
key = 'scroll' + Pos,
old = elem[key],
Dim = axis == 'x' ? 'Width' : 'Height';
if( toff ){
attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
if( settings.margin ){
attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
}
attr[key] += settings.offset[pos] || 0;
if( settings.over[pos] )
attr[key] += targ[Dim.toLowerCase()]() * settings.over[pos];
}else
attr[key] = targ[pos];
if( /^\d+$/.test(attr[key]) )
attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max(Dim) );
if( !i && settings.queue ){
if( old != attr[key] )
animate( settings.onAfterFirst );
delete attr[key];
}
});
animate( settings.onAfter );
function animate( callback ){
$elem.animate( attr, duration, settings.easing, callback && function(){
callback.call(this, target, settings);
});
};
function max( Dim ){
var scroll = 'scroll'+Dim;
if( !win )
return elem[scroll];
var size = 'client' + Dim,
html = elem.ownerDocument.documentElement,
body = elem.ownerDocument.body;
return Math.max( html[scroll], body[scroll] )
- Math.min( html[size] , body[size] );
};
}).end();
};
function both( val ){
return typeof val == 'object' ? val : { top:val, left:val };
};
})( jQuery );Si vous pouviez m'aider ce serait vraiment top, j'ai l'impression d'avoir tout essayé là...
merci !