menu select + scroll animé

Question

Bonjour,

Pour la réalisation d'un nouveau site je souhaiterai utiliser une navigation par ancres avec menu de type form select couplée à un effet de scroll animé de type smoothscroll ou autre...Seulement j'ai déjà testé pas mal de librairies (jquery, mootools,etc...), et pas moyen de coupler ce satané menu avec un script (généralement s'occupe des liens "ahref" pas des balises options avec sélecteur "value"...).

Si quelqun a une idée pour le réaliser cela m'aiderait grandement !
merci d'avance !

Bul3 · Answer

Bonjour,
le faire sans utiliser de librairies ?
Cordialement	[mon Site]	[M'écrire]	Bul

ethos20 · Answer

Re,

Le problème est aussi sans conteste que je ne suis pas non plus un vrai développeur spécialiste du javascript...Même si ça fait maintenant plusieurs jours que je suis penché sur ce pb...et que pour apprendre c'est pas mal non plus !

Avec ce code je parviens bien à récup le "value" et il me renvoie effectivement sur les ancres correspondantes...




















test


	













menu
 
lien1
lien2
lien3
 
lien4
lien5







 



blablabla bla bla.






 



blablabla bla bla.






 



blablabla bla bla.






 



blablabla bla bla.





 



blablabla bla bla.














/*  CSS
----------------------------------------------------------------------------------------------------*/
html{
overflow:hidden;
}
body {
background-color:#ffffff;
}
#containerGlobal{
position:absolute;
background:none;
width:745px;
height:100%;
padding-left:220px;
padding-top:60px;
color:white;
font-family:Arial;
font-size:9em;
font-weight:bold;
z-index:-1;
}
#container1, #container2, #container3, #container4, #container5{
margin-top:0.5em;
margin-bottom:3em;
position:relative;
}
.scrollLink {
padding-top: 67px;
}

#menu{
position:fixed;
margin-left:30px;
margin-top:20px;
}



Mais sans le smooth...arghhhh !
Bref...ça me dépasse...de toute manière.

Bul3 · Answer

arghhh !!!! jquery et autres ??? :

ethos20 · Answer

Effectivement, j'inclus aussi tout ça... jQuery(function( $ ){ /** * Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option. * @see http://flesler.demos.com/jquery/scrollTo/ * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.LocalScroll. */ // The default axis is 'y', but in this demo, I want to scroll both // You can modify any default like this $.localScroll.defaults.axis = 'xy'; // Scroll initially if there's a hash (#something) in the url $.localScroll.hash({ // Could be a selector or a jQuery object too. duration:1500 }); /** * NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I * also affect the >> and << links. I want every link in the page to scroll. */ $.localScroll({ // could be a selector or a jQuery object too. duration:1500, hash:true, onBefore:function( e, anchor, $target ){ // The 'this' is the settings object, can be modified }, onAfter:function( anchor, settings ){ // The 'this' contains the scrolled element (#content) } }); }); 1 = initialiser le script. /** * jQuery.LocalScroll - Animated scrolling navigation, using anchors. * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com * Dual licensed under MIT and GPL. * Date: 3/11/2009 * @author Ariel Flesler * @version 1.2.7 **/ ;(function($){var l=location.href.replace(/#.*/,'');var g=$.localScroll=function(a){$('body').localScroll(a)};g.defaults={duration:1e3,axis:'y',event:'click',stop:true,target:window,reset:true};g.hash=function(a){if(location.hash){a=$.extend({},g.defaults,a);a.hash=false;if(a.reset){var e=a.duration;delete a.duration;$(a.target).scrollTo(0,a);a.duration=e}i(0,location,a)}};$.fn.localScroll=function(b){b=$.extend({},g.defaults,b);return b.lazy?this.bind(b.event,function(a){var e=$([a.target,a.target.parentNode]).filter(d)[0];if(e)i(a,e,b)}):this.find('a,area').filter(d).bind(b.event,function(a){i(a,this,b)}).end().end();function d(){return!!this.href&&!!this.hash&&this.href.replace(this.hash,'')==l&&(!b.filter||$(this).is(b.filter))}};function i(a,e,b){var d=e.hash.slice(1),f=document.getElementById(d)||document.getElementsByName(d)[0];if(!f)return;if(a)a.preventDefault();var h=$(b.target);if(b.lock&&h.is(':animated')||b.onBefore&&b.onBefore.call(b,a,f,h)===false)return;if(b.stop)h.stop(true);if(b.hash){var j=f.id==d?'id':'name',k=$(' ').attr(j,d).css({position:'absolute',top:$(window).scrollTop(),left:$(window).scrollLeft()});f[j]='';$('body').prepend(k);location=e.hash;k.remove();f[j]=d}h.scrollTo(f,b).trigger('notify.serialScroll',[f])}})(jQuery); 2 = localScroll d'Ariel Flesher /** * jQuery.ScrollTo - Easy element scrolling using jQuery. * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com * Dual licensed under MIT and GPL. * Date: 5/25/2009 * @author Ariel Flesler * @version 1.4.2 * * http://flesler.blogspot.com/2007/10/jqueryscrollto.html */ ;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery); 3 = scrollTo 4 = api google link pour jquery 1.3.2min. Et c'est pas évident. ... J'ai posé la question sur le blog du dévelopeur directement, mais je m'attends pas trop à avoir de réponse... normal(?). Le défi tient tjrs...

ethos20 · Answer

Je viens de trouver !!! Ahhhh ça fait du bien ! Solution : ici. Avec jquery (google api), bookmarks.js et je link directement vers l'ancre. Il suffit d'ajouter des lien normaux "a id" Et le tour est joué !!! Ca a été dur mais j'y suis arrivé ! et bien heureux ! héhé. Ouf !

Menu select + scroll animé

5 réponses

Votre réponse

Discussions similaires