Avatar billede Slettet bruger
22. oktober 2010 - 21:24 Der er 6 kommentarer og
1 løsning

jQuery: Browser-scroll

Hej Eksperter

Jeg skal have lavet en animeret scroll ved tryk på en knap, hvor skærmvinduet scroller ned til, at toppen af skærmen er ud for et bestemt element på siden.
Er der nogen, der kan give et link til en tutorial el.lign. om programmering af sådanne scroll-effekter?
Avatar billede w13 Novice
22. oktober 2010 - 21:37 #1
Prøv:

var oContainer = $('body');
var o                  = $('#scroll-to-this');
oContainer.animate({
    scrollTop: o.offset().top - oContainer.offset().top
    }, 1000
);


Så retter du bare '#scroll-to-this', så det matcher det rigtige element. =)

Du kan også bruge den som funktion:

function scrollWin(o) {
    var oContainer = $('body');
    oContainer.animate({
        scrollTop: o.offset().top - oContainer.offset().top
        }, 1000
    );
}
Avatar billede Slettet bruger
22. oktober 2010 - 22:45 #2
Super.
Tak.
Avatar billede Slettet bruger
23. oktober 2010 - 20:37 #3
Hej igen

Det fungerer ikke i Internet Explorer og Firefox, og i Opera hakker og springer skærmen.

Vil du gennemgå scriptet i detaljer?
Avatar billede w13 Novice
23. oktober 2010 - 22:47 #4
Hvilken fejlbesked får du i Internet Explorer og Firefox (ved at bruge fejlkonsollen, Ctrl+J på PC)?

Jeg bruger selv scriptet, hvor det virker fint. Jeg har dog ikke testet Opera, måske er JQuery ikke så kompatibelt der!?
Avatar billede Slettet bruger
23. oktober 2010 - 23:06 #5
Jeg fandt løsningen.

Effekten skal sættes på både body- og html-tag'et:
$('html,body');

Nogle browsere reagerer åbenbart på body, andre på html. Nu virker det i IE7, IE8, Firefox, Safari og Chrome. Opera-browseren reagerer dog på begge tags, og det gør at skærmen springer vildt omkring, indtil effekten er slut.
Det har jeg dog ikke fundet en løsning på.
Avatar billede w13 Novice
23. oktober 2010 - 23:16 #6
Ok, det er nice to know. =) Og tak for point!

Ang. Opera: Hvad hvis du kun sætter det på HTML, virker det så ikke i alle måske?
Avatar billede Slettet bruger
23. oktober 2010 - 23:29 #7
Så lidt.

Med body virker det i Chrome og Safari, og Opera hopper en smule.
Med html virker det i IE7, IE8, Firefox og Opera.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester