Scrolling while navigation in the Same page?

[Siddharth Bhojnagarwala]

Hello there,

Well I have come across this problem that in big lenghty pages I am creating, I want to place a link to Go to Top or Go here/there in the same page. IT is working absolutely fine with the Anchor tags.

The problem is It just shows me the portion I am linking directly, but I want it to scroll it, i.e, it should scroll to top and also for scroll for bottom instead of showing immediately/instantly. I guess some ScrollTo functionality of Jquery will work (as searched in google).

I am very new to javascript, jquery and Confluence, so can anyone please tell me how to integrate it so that automatically while doing same page navigation, it scrolls.

Regards.

[David at David Simpson Apps]

Better than my last answer, try this as it works...

<script>AJS.toInit(function(){
    AJS.$('a[href^="#"]').click(function(e){
         AJS.$('html,body').animate({scrollTop: AJS.$( AJS.$(this).attr('href' )).offset().top});
        e.preventDefault();
    });
});</script>

Update: This works if added to the At the end of the HEAD section. I forgot to add AJS.$ to the jQuery object :(

[Siddharth Bhojnagarwala]

I added this:

<script type="text/javascript">
AJS.toInit(function(){
	$('a[href^="#"]').click(function(e){
		 $('html,body').animate({scrollTop: $( $(this).attr('href' )).offset().top});
		e.preventDefault();
	});
});
</script>

in my Administrator -> Custom HTML -> At end of the HEAD but still it is not scrolling!

[David at David Simpson Apps]

Good call. check the update above.

[Siddharth Bhojnagarwala]

Added the NEW code At the end of the HEAD section. Now whats happening is, when I go to the link, and click on it, nothing is happening. should I add something more to the head section?

EDIT: It is working with Global Look and Feel theme but I am using Documentation theme.

[David at David Simpson Apps]

Try this:

http://djpate.com/2009/10/07/animated-scroll-to-anchorid-function-with-jquery/

By the way: Atlassian refers to their version of jQuery with AJS.$ instead of jQuery or $.