Notifikationer

Markér alle som læst Log ud

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?

Synes godt om

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
);
}

Synes godt om

Slettet bruger

22. oktober 2010 - 22:45 #2

Super.
Tak.

Synes godt om

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?

Synes godt om

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

Synes godt om

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å.

Synes godt om

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?

Synes godt om

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.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS