---
title: "Smooth scroll"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/189657-smooth-scroll"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Vixnor"
published: "2012-04-23T03:24:01.000Z"
updated: "2012-05-27T17:24:32.000Z"
replies: 4
views: 838
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/189657-smooth-scroll"
---

# Smooth scroll

## #1 — Vixnor, 2012-04-23T03:24Z

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)

Permalänk: https://www.webforum.nu/p/189657

## #2 — voigtann1, 2012-04-23T05:33Z

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.

Permalänk: https://www.webforum.nu/p/2297813

## #3 — Vixnor, 2012-04-23T15:13Z

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>
```

Permalänk: https://www.webforum.nu/p/2297832

## #4 — voigtann1, 2012-04-23T15:47Z

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?

Permalänk: https://www.webforum.nu/p/2297833

## #5 — Vixnor, 2012-05-27T17:24Z

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)?

Permalänk: https://www.webforum.nu/p/2298709

---

Tråden på webben: https://www.webforum.nu/amne/javascript/189657-smooth-scroll