Jump to content
Search Community

Scrolling the page up and down with Greensock JS

ilovemypixels test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there,

 

I have seen many sites that let you smoothly scroll a webpage up and down when you click on navigation buttons. I was wondering how I would go about this with the new Greensock JS.

 

I have had no luck, and also all the examples I have looked at scroll to the location of a div. Is there no way I can just set a value or height property instead. Like scrollTo 1000px.

 

I already have my function set up so I just need the animate scroll code.

 

 

$('#box1').click(function(){

// Code goes here

})

 

Thanks for your help

 

Will

 

 

P.s. Sorry I just moved this post to here, realised I posted this in the wrong area of the forum before.

Link to comment
Share on other sites

First let me break down how you can do this with an onUpdate callback:

 

//returns the current horizontal scroll position
function getScrollX() {
return (window.pageXOffset != null) ? window.pageXOffset : (document.documentElement.scrollLeft != null) ? document.documentElement.scrollLeft : document.body.scrollLeft;
}
//returns the current vertical scroll position
function getScrollY() {
return (window.pageYOffset != null) ? window.pageYOffset : (document.documentElement.scrollTop != null) ? document.documentElement.scrollTop : document.body.scrollTop;
}

$("#box1").click(function(e) {
var curScroll = {x:getScrollX(), y:getScrollY()};
TweenLite.to(curScroll, 1, {y:0, onUpdate:function() { window.scrollTo(curScroll.x, curScroll.y); }});
});

 

The trickiest part is just figuring out the current scroll position.

 

So I whipped together a plugin that should make this easier for you (attached). Once you load the plugin, it'd be as simple as:

 

$("#box1").click(function(e) {
TweenLite.to(window, 1, {scrollTo:{y:0}});
});

 

And of course you could control the x position as well, and/or add an ease like this:

 

$("#box1").click(function(e) {
TweenLite.to(window, 1, {scrollTo:{y:0, x:0}, ease:Power2.easeInOut});
});

 

Does that help?

ScrollToPlugin.zip

  • Like 3
Link to comment
Share on other sites

Will, I just started messing with Jack's new scrollTo plugin.

 

this is what I came up with: http://snorkl.tv/dev...rollToDemo.html

 

the js side of it looks like:

$(".box2link").bind('click', { id: '#box2' }, scroller);
$(".box7link").bind('click', { id: '#box7' }, scroller);

function scroller(event){
 var scrollYPos = $(event.data.id).offset().top;
 event.preventDefault();
 TweenLite.to(window, 2, {scrollTo:{y:scrollYPos, x:0}, ease:Power4.easeOut})
 }

 

hope this helps.

 

[edit] i just realized you already knew how to scroll to a div... oops[/edit]

 

-c

  • Like 2
Link to comment
Share on other sites

Hey guys,

this is great application in using Tweenlite to scrollTo. However, I'm working on some projects and it seems that this scrollTo is behaving like the jQuery one on iPhone and iPad where it does a lock on the screen once you click one of them and you have to sort of move the content slightly (up/down) then you can click the navigation again. It'd b great if Will or Jack can fix this issue as I believe this is quite a major issue. Let me know if you have any resolution. Thank you.

Link to comment
Share on other sites

i just did some research on this and there appears to be known bugs with position:fixed elements. this is the best discussion I could find on the matter and none of the "solutions" really seem viable.

 

http://stackoverflow.com/questions/8752220/mobile-safari-bug-on-fixed-positioned-button-after-scrolltop-programmatically-ch

 

very hacky with noticeable screen flickers.

 

From reading other articles I get the sense that it isn't something that is easily fixed :|

Link to comment
Share on other sites

i just did some research on this and there appears to be known bugs with position:fixed elements. this is the best discussion I could find on the matter and none of the "solutions" really seem viable.

 

http://stackoverflow...rammatically-ch

 

very hacky with noticeable screen flickers.

 

From reading other articles I get the sense that it isn't something that is easily fixed :|

 

Thanks for the reply, I was looking at that page too and tried to apply it below and still doesn't work.

 

I tried using this link http://snorkl.tv/dev/js_demo1/scrollToDemo.html and added the following code, still doesn't seem to work.

 

function scroller(event){
 var scrollYPos = $(event.data.id).offset().top;
 event.preventDefault();
 TweenLite.to(window, 2, {scrollTo:{y:scrollYPos, x:0}, ease:Power4.easeOut, onComplete:updatePos});
 function updatePos(){
  TweenLite.to(window, 0, {scrollTo:{y:scrollYPos+1}});
  TweenLite.to(window, 0, {scrollTo:{y:scrollYPos-1}});
 }
}

 

Know whats wrong?

Link to comment
Share on other sites

Hi! I'm using the greensock ScrollTo plugin and it works perfectly. but if I try to use it on a div with overflow:auto instead of the "window" it dosen't work at all.

Somebody knows if there is any way to make it work?

 

Ex:

 

This works:

$('#div_id').click({
TweenLite.to(window, 1, {scrollTo:{y: 500, x:0}, ease:Power4.easeInOut});
});

 

This Not:

$('#div_id').click({
var wrap = $('#wrap')
TweenLite.to(wrap, 1, {scrollTo:{y: 500, x:0}, ease:Power4.easeInOut});
});

Link to comment
Share on other sites

  • 2 months later...

ok. i can confirm that the lastest ScrollToPlugin demo linked above breaks with the latest version of the plugin.

 

I just chucked a new ScrollToPlugin on my server and it broke. Trying to dig up an old version that works...

 

I'm sure Jack will have a better idea what may have changed

 

-c

 

UPDATE

Using the original ScrollToPlugin from the .zip file above, my demo currently works:

http://snorkl.tv/dev/js_demo1/scrollToDemo.html

Link to comment
Share on other sites

  • 4 months later...

The Plugin works fine now on PC/Mac. But I think there is a bug when using Safari on the iPad/iPhone: It doen't really animate and just moves a few Pixels. Weird behaviour: When I put an alert message right behind the Tween, the window moves to the correct Position (but doen't animate)

I tested with the snorkl.tv-Example-Structure above, just updated to the current version.

 

Any Ideas?

Thanks, Sebastian

Link to comment
Share on other sites

Ah, interesting - iOS appears to have a bug that causes it to misreport the scrolling position by about 1 pixel! So if you set the window's scroll position and then check it on render later, it's 1 pixel different. We've got code in ScrollToPlugin that causes it to keep checking to see if the user interactively scrolled the window/object so that we can automatically kill the tween (otherwise the user would feel like they're fighting with the tween). That was getting triggered due to the one pixel difference bug, so we just posted a new version of ScrollToPlugin that uses a tolerance of 2 pixels before it'll kill the tween. That should suffice because when the user scrolls, it would almost surely be more than 2 pixels.

 

Please check out the latest version and let us know if it works well for you. http://www.greensock.com/gsap-js/

Link to comment
Share on other sites

  • 1 month later...

Thanks for this plug-in, it's exactly what I needed! =)

 

I'm still having one issue on iOS though... If you open the example above on a device and click scroll to box 7, then click the time/task bar to scroll back to the top of the page the links no longer scroll the page. You have to first manually scroll a few pixels, so skipY doesn't become true in setRatio.

 

If I come up with a solution, I'll repost.

Link to comment
Share on other sites

Hey Jack - I don't know if this will help, but while working through an attempt at a fix, I noticed that setRatio gets called twice, but only the second time did it have the values that would have caused skipY to be false. However, when it's called the first time with values that let skipY become true, the tween is killed, so when the values come in correct the second time... it's too late.

 

Thanks for your help... and GSAP!

Link to comment
Share on other sites

This is another bug in iOS Safari. After you tap the top bar like that, if you click/tap a link and then preventDefault() on the event, Safari just completely ignores any window.scrollTo() calls! The tweening engine is doing its job properly, but the browser is ignoring the calls.

 

There are two solutions, neither of which can be implemented inside the plugin:

  1. Make the <a> links go to "#" and don't preventDefault() on the event. The down side of this approach is that if the user has Javascript disabled and (for some reason) you wanted the links to go to a URL, they wouldn't. But of course in this case we're just scrolling, so it is inconsequential - if the user disables Javascript it wouldn't work anyway.
    -OR-
  2. In your event handler, call window.scrollTo() and feed a value that's 1 pixel different. Like this:
     
    	
    if (document.body.scrollTop !== undefined) {	
       window.scrollTo(document.body.scrollLeft, document.body.scrollTop+1);	
    }	


    This wakes Safari up and causes it to allow the scrolling thereafter. Weird, I know. And what's weirder is that it won't work if that same code is inside the ScrollToPlugin. It's as if the code has to literally live in the same document as the event handler. Even if it's in a script file that's served from the same domain, it doesn't matter.
     
    With this solution, you can preventDefault() on the event. Seems to work fine for me.

Does that help? Don't you love browser inconsistencies and bugs? Especially ones that can't be easily worked around inside the JS files? Ugh. :x

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...

Jack - I tried your two fixes for the bug in Safari IOS. They do work, but they force the scroll to begin each time back at the top of the page -- rather than the current location. Is there any way to prevent that? Thanks for your help.

Link to comment
Share on other sites

Did you tried 

 

$("body").append("<div id=\"scroull-isosfix\"></div>").css({height : "101%", overflow : "hidden"});
			 				setTimeout(function() { $("#scroull-isosfix").remove(); }, 500);

 

on the end of the scroll? Btw I'm writing a smooth-scroll plugin with TweenLite, autoSelect navigation, scroll to element, global and custom offset for each element... I can share the source code with wou if you like :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...