webForumDet fria alternativet

Smooth scroll

JavaScript

4 svar · 824 visningar · startad av Vixnor

Medlem sedan okt. 200946 inlägg
Frågan#1

Hej, jag använder en smooth scroll (vågrätt) med javascript och vill använda den lodrätt på samma gång.

<script type="text/javascript">
            $(function() {
                $('div.menu a').bind('click',function(event){
                    var $anchor = $(this);
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }

[B]                    /*
                       Här klistrade jag in
                     */[/B]					
			
					
					, 800);
                    event.preventDefault();
                });
            });
        </script>

Det jag klistrade in ser ut såhär:

					{
                        scrollTop: $($anchor.attr('href')).offset().top
                    }

Jag hamnade på rätt position men det blev utan "smooth" scroll. (Använder det med jQuery)

Medlem sedan juni 20019 519 inlägg
#2

läs hur deras API fungera: http://api.jquery.com/animate/

första parametern är ett objekt som säger hur animeringen skall se ut:

            $(function() {
                $('div.menu a').bind('click',function(event){
                    var $anchor = $(this);
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left[b],
                        scrollTop: $($anchor.attr('href')).offset().top[/b]
                    }, 800);
                    event.preventDefault();
                });
            });

skall det ser ut.

Medlem sedan okt. 200946 inlägg
#3

Det blev samma resultat som när jag gjorde min grej, dvs. den hamnade på rätt plats men utan animation (smooth scroll)

Så här ser den alltså ut när den bara funkar i sidled:

        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>		
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('ul.nav a').bind('click',function(event){
                    var $anchor = $(this);
                    /*
                    if you want to use one of the easing effects:
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeInOutExpo');
                     */
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
                });
            });
        </script>

Och samma grej fast lodrätt:

        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>		
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('ul.nav a').bind('click',function(event){
                    var $anchor = $(this);
                    
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1500,'easeInOutExpo');
                    /*
                    if you don't want to use the easing effects:
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1000);
                    */
                    event.preventDefault();
                });
            });
        </script>
Medlem sedan juni 20019 519 inlägg
#4

Det är märkligt, för det fungera för mig: http://jsbin.com/inimac/edit#javascript,html,live

Du skriver ju att du vill ha animeringen skall ske samtidigt, men om du kör två animate (och stop) så kommer den ju stoppa den förra animeringen. Har du verkligen testat min kod?

Medlem sedan okt. 200946 inlägg
#5

Offset, hur funkar detta

Jag använder en annan kod istället eftersom jag vill ha offset till bilder.
Jag använder "Fancyscroll" från denna sida: http://gravitysign.com/fancyscroll/horizontal#/ och min javascript kod ser ut såhär: (likadan som källkoden på sidan, typ)

	window.onload = function(){
	var fs=new fancyScroll({easingFunc: 'easeInOutQuint',
				 easingTime: 800,
				 deepLinking: true,
				 scrollMode: 'horizontal',
				 goTopText: 'Return'});
	fs.addScroll(,['sale','discount','new','contact']);
	};

Nu undrar jag om det går att få den att gå till toppen (goTopText: 'Return') med smooth scroll istället för att den går upp direkt och sedan scrollar åt sidan (funkar inte att testa på den sidan jag länkade till).
Eller om man kan få den att scrolla både verticalt och horizontalt som voigtann1 visade i länken i inlägget innan?

En annan grej jag tänkte på den sidan jag länkade till är om man kan klicka på discount om man står i "discount"-området (lite höger-scrollat) och hamna längst upp till vänster vid "discount"-området (mineral vatten)?

321 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
120 ms — deklarationer (db)
0 ms — hämta statistik (cache)
137 ms — hämta tråd, inlägg och bilagor (db)
182 ms — ändringar (db)