FaceScroll scrollbar setting scroll position

**aztech4mac** · 10-04-2012, 02:17 AM

1) Script Title: FaceScroll Custom scrollbar

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...roll/index.htm

3) Describe problem: I now find I need to set the scroll position and haven't been successful. I tried to rework John's solution to get the position, but position().top=-100 didn't seem to work. What's the trick to do this?

Thanks to all you guys...

**bernie1227** · 10-04-2012, 02:31 AM

what do you mean by setting the scroll position? Do you mean that you want the scrollbar to start in a particular place?

**aztech4mac** · 10-04-2012, 04:22 AM

I want to enable page up and page down buttons. The div's content is dozens of screen heights tall. With that much content, it's nice to just be able to jump from page to page without all that scrolling. I need to programmatically set the div scroll position to a set value. I'm usually pretty good at adapting code, but I'm thinking I need to re-evaluate my skill level, I just can't seem to get this to work.

**bernie1227** · 10-04-2012, 05:05 AM

Scroll to bottom:

Code:

 $jq('#nameofdiv').animate({   
         scrollTop: $jq('#nameofdiv')[0].scrollHeight}  
      );  
 }

Scroll to top:

Code:

 $jq('#nameofdiv').animate({   
         scrollTop: 0 }  
      );  
 }

Now of course, you will have to trigger this jquery if the keys are pressed. In case you don't know, the keycode for pageup is 33, and pagedown is 34. See here for more info.

**aztech4mac** · 10-06-2012, 04:39 PM

Thanks bernie1227 for the assist...

That's not it. Facescroll creates additional divs dynamically. I need to access the proper one. I may even have to move the scroll thingie to accomplish this. Your example moved the outer div and once scroll that way a portion of the div is no longer available when scrolling (it clipped the div).

Really could use some help with this.

**bernie1227** · 10-06-2012, 06:41 PM

Maybe the scrolltop() documentation will help you:
http://api.jquery.com/scrollTop/

**aztech4mac** · 10-07-2012, 04:22 AM

Thanks again bernie1227,

I had a basic understanding of scrollTop before I read your posted link, but know much more now. In one of the comments it states that this doesn't work if a parent div has overflow:hidden set. I'll look through my code to see if a wrapper div is set that way, but this could also be within a div created by the faceScroll javascript file. I need to apply scrollTop to one of faceScroll's internal divs, just don't know which one and if I'm running into this overeflow:hidden issue. Seems to me reversing John code to read the position, should work but everything I tried did nothing or failed on syntax error. I'm finding this harder that it should be...

John, you've been silent on this... I know you have the answer

Did you give a clue in your previous answer and I'm not seeing it?

**jscheuer1** · 10-07-2012, 09:05 AM

Well, reversing what I did would mean not setting the position, rather setting the top. Like:

Code:

$('whatever').css({top: -55});

Unlike regular javascript, you don't need to specify pixels.

I hesitated to mention this though because in order for both the content and the scrollbar to react properly, you probably have to set them both and that could get tricky as one must be proportional to the other. I've been thinking about playing with it, but I've been a bit busy with other things. Another approach would be to find or create a public method within the script itself that would use the script's own proportional positioning routine.

But it might not be all that complicated, setting just one might set them both. I just haven't checked yet. I'm pretty sure though, that doing it that way, they'd get out of sync.

**bernie1227** · 10-07-2012, 09:19 AM

That solution doesn't seem to be working for me John (nothing happens at all).
I've crawled through the script for a while today, and I can't seem to find whatever is controlling the position. I know for a fact that position().top shows where the scrollbar is, but it can't be modified, ie:

Code:

$('whatever').position().top = 0;

Or it's nearest equivalent doesn't work, you may have more luck taking a look.

**jscheuer1** · 10-07-2012, 05:27 PM

It works like I said more or less and as I feared. If I type this into the console on the demo page:

Code:

$('#demo2 .alt-scroll-content').animate({top: -55});

and execute it, it does. But the scrollbar doesn't move. And if the scrollbar was at the bottom (-55 is near the top, all movement of the content is in negative values or to 0, which is the top), as soon as I start dragging the scrollbar after that it jumps the content to the bottom where the scrollbar still is. In other words like I said, they're out of sync.

Now there are functions in the script that keep these two proportional (they never move the exact same amount for any given movement because their respective ranges of movement are different) and in sync (so that the position of one corresponds to the position of the other). I'll have a look to see how we can use them to our purpose here.