Jump to content
Search Community

Animated Scroll to Anchor Tag

jeff4gee 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 Jeff,

 

The easiest way to do that is to add an id name to your anchor, and then set the Tween to that point using the scrollTo plugin and some method to get the offset position of the anchor. Something like this:

 

HTML

blah blah blah blah <a href="#" onclick="gotoAnchor1()">go to anchor1</a> blah blah
<div class="yourClass">blah blah blah blah blah blah blah blah<span id="anchor1">blah blah blah blah blah blah</span> blah blah blah blah...</div>

 

Javascript

var anchor1 = document.getElementbyId("anchor1");
var posTop = anchor1.offsetTop;
function  gotoAnchor1()
{
 TweenLite.to(window, 2, {scrollTo:posTop});
}

 

Now in JQuery it would be like this:

 

HTML

blah blah blah blah <a href="#" id="link1">go to anchor1</a> blah blah
<div class="yourClass">blah blah blah blah blah blah blah blah<span id="anchor1">blah blah blah blah blah blah</span> blah blah blah blah...</div>

 

SCRIPT

$(document),ready(function(){

var elem = $("span#anchor1"),
elemPos = elem.offset().top;

$("a#link1").click(function()
{
 TweenLite.to(window, 2, {scrollTo:elemPos});
});

});

 

Hope this helps,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Firstly, thank you so much Rodrigo for your incredibly helpful tutorials! I am completely new to animations - and rather rusty on Javascript so your examples have been a godsend.

 

I am trying to achieve a similar thing to jeff4gee: custom navigation via animated scroll to an anchor tag. I have that working. However, my problem is on page refresh. At present when I refresh the page, it's taking me to the last scrolled-to position, rather than the top of the page, which is what I need.

 

You can see the same thing in action on your horizontal and vertical scrolling sample pages (links below) by scrolling to a particular point. When you reload the page, it immediately jumps to the last scrolled position.

 

http://www.websnap.cl/samples/parallax/horizontal.scrolling.html

http://www.websnap.cl/samples/parallax/vertical.scrolling.html

 

Do you have any suggestions as to how to prevent this and "reset" the scrollTo y value back to 0?

 

many thanks,

Brigitte

Link to comment
Share on other sites

Hi Brigitte,

 

Mhhh... honestly i don't know any other method than ctrl + F5 in order to clear the current document's cache of the browser. You're right in a tween scrolling environment page refresh creates quite a mess but also you have to consider that page refresh is not a standard user behavior, is more a thing that we do when we're testing over and over again what we're doing, you also should keep in mind that clearing the current document's cache would force to reload everything again, and that, if your page has a lot of images and scripts loading, can become a little annoying for some "give it to me now!!" type of users.

 

Anyway doing a fast search on google i found this, take a look at them:

 

http://msdn.microsoft.com/en-us/library/ms536691%28VS.85%29.aspx

 

http://stackoverflow.com/questions/8155064/how-to-programmatically-empty-browser-cache

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hi Rodrigo,

 

Thanks for your prompt response. I don't want to clear the cache, I just need to return to the top of the page, which is clearly more complex than I had anticipated. I think I'll just have to make "back to top" links readily available!

 

thanks again,

Brigitte

Link to comment
Share on other sites

Hmm, maybe try running

TweenLite.set(window, {scrollTo:0});

on unload or beforeunload?

 

That works perfect, just use it at the beginning of $(document).ready and you're set to go:

 

$(document).ready(function(){
TweenLite.set(window, {scrollTo:0});
//Rest of the code
});

 

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Thanks Jamie and Rodrigo.

 

I must have something else going on as that's not working for me. What I now get is a brief flash of the top of the page, and then it scrolls down to the last scrolled position again. I'll have a bit of an investigation and report back.

 

Brigitte.

Link to comment
Share on other sites

Hi,

 

You're welcome. I updated the example with the TweenLite.set, so you can see it in action.

 

Now it would help if you could post some of your code or setup a fiddle to see why is the page going back to the last scrolled position, without seeing some of your code we'll be guessing. It maybe event bubbling, so it could help you to add some console.log() or alert() to your event handler's code to see if they keep firing after page refresh.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

I think that may not always work since the 'scroll to last position' seems to occur after document ready (probably at the window load event)

 

You should bind the scrolling to either the window beforeunload or load event.

$(window).bind('beforeunload', function () {
   window.scrollTo(0,0);
});
// or
$(window).load(function () {
   window.scrollTo(0,0);
});

 

beforeunload occurs just after you press refresh (or navigate to another URL) but before the next page starts loading. This way the browser will only be 'restoring' the scroll to 0 on the next load. load will occur after document is ready, and all image and frame content has finished loading on the page. I've not tested whether there are any particular benefits to one of these approaches, but either should do the trick.

  • Like 1
Link to comment
Share on other sites

Hi,

I've updated the examples with the code proposed by Jamie, but because the original sample had a menu and some animation that couldn't allow to see what happened on page refresh.

Here are the updated links:

http://websnap.cl/samples/scroll.to.sample.page.refresh.1.html

http://websnap.cl/samples/scroll.to.sample.page.refresh.2.html

The first one uses

$(document).ready(function(){
TweenLite.set(window, {scrollTo:0});
//Rest of the code
});


The second uses
$(document).ready(function(){

$(window).bind('beforeunload', function ()
{
window.scrollTo(0,0);
});
//Rest of the code
});


Cheers,
Rodrigo.

 

UPDATE: I moved the examples to my new blog, and created a slightly better sample for the page refresh here:

 

http://codeaway.netii.net/sample.code/scroll.to/scroll.to.sample.page.refresh.html

  • Like 1
Link to comment
Share on other sites

Did a few tests:

Chrome 23 > option1 didn't work, option2 works

IE8 > option1 didn't work, option2 works

Opera 12.11 > option1 works, option2 didn't

 

Top work on those demos Rodrigo; I don't want to impose, but do you feel like throwing up the window.onload option as well? (sorry to ask but I don't have any hosting at the moment) It might be useful for experience testing... onbeforeunload gives a sudden jump to the top as soon as you click refresh, which might be disconcerting to users - load may be preferred but without testing there could be differences with browser compatibility.

Link to comment
Share on other sites

Hi Jamie and all,

 

Lately I've been dealing with some personal issues that hasn't allowed me to participate in the forums in a good fashion. You're right the code should be in a $(window).load() event to work as expected, for the same reason I've tested my codes only in firefox 17, and for that I ask everyone to forgive me, but I'm sleeping like crap, dealing with my issues and my business so my free time is small.

 

I hope if isn't too much to ask for you to complete the examples, the example's code is complete in the html file so there's no javascript file to download, in fact the script, in a moment when i lost a chromosome, is between the head tags.

 

Again sorry everyone for the inconveniences and thank you for your understanding.

 

Like always....Cheers,

Rodrigo.

Link to comment
Share on other sites

My apologies, Jamie and Rodrigo. I've been caught up in another project, but I do very much appreciate the assistance and advice you've both offered.

 

Rodrigo, there certainly is a tremendous amount of information in your examples and all of your forum posts. Without those I would have been completely lost. I should be the one apologising for not following up on my enquiry, not you!

 

I hope you're able to find some relief in what sounds like a difficult time for you.

 

Brigitte

  • Like 2
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...