Search jQuery

jQuery Forum

fadeIn() viewport scrolltop problem

in Using jQuery • 11 years ago

i found this in the search (http://forum.jquery.com/topic/fadein-of-div-scrolls-viewport-to-top-of-div), which describes my problem exactly.

but i do not change hash tags, and i dont do clicking.

an interval function is fading elements in and out. like a slider, but automated (displaying catchphrases).

everytime one interval is over, the viewport centers the faded div. so if you are down the page reading other stuff, it zaps you back up to watch the "oh so awesome"-animation.

is this a known issue? i would like the viewport to just ignore whats happening on top of the page.

thx for any help

Replies(7)

Chrazy

Re: fadeIn() viewport scrolltop problem

11 years ago

If an element that is taking up space is removed before something else takes it's place you will automatically scroll up. Not sure if something like this could be your case. Try to set up a public page for people to look at.

atrioom

Re: fadeIn() viewport scrolltop problem

11 years ago

okay, that seems like a good lead...

here is a fiddle: http://jsfiddle.net/LWM4m/1/

i couldnt get it to do the scrolltop exessively, but when you scroll down, you see how the viewport jumps. this is far more significant in the live version, but you get the point.

i could remove the active class after applying it to the new object. i tried that in my local version and it didnt change anything unforunately...

edit: sorry for the markup, sorry for the console.log()

atrioom

Re: fadeIn() viewport scrolltop problem

11 years ago

Here is a cleaner version (http://jsfiddle.net/LWM4m/24/)

It seems like the behaviour is hard to reconstruct in jsFiddle. It works, but its not as significant (as i said earlier). Click the link and wait for the js to run. then scroll to the bottom in the "result" window. the viewport should jump up about an inch.

Chrazy

Re: fadeIn() viewport scrolltop problem

11 years ago

It jumps because the content that you're switching between have different height. An easy fix would be to set a min-height as big as the largest content you will load. For your example, add a min-height: 80px; to the .viewport ul

atrioom