Scrolling a page from its bottom to a top is funny simple for achieving with the means given by MODx — you need to create anchor at the top and link it at the bottom (usually in footer section):

Simple "top of page" Link

<a name="topofpage"></a>
... main part of the page ...
<a href="[~[*id*]~]#topofpage">top of page</a>

The above code works fine for all typical cases but it is insufficient on sophisticated pages whose urls comprise one or more query variables — after clicking on such „top of page” link all query variables are lost and you are landing on the base/first page of the whole set of pages determined by those variables.

Scenario for generalized "top of page" Link

<a href="[(site_url)][!SelfReference!]#topofpage">top of page</a>

This generalized scenario works on this site, so I do not need to create special example in order to present how the snippet behaves ;) The snippet has been also posted to this thread on MODx forum.

The second attached version has been slightly modified — it still preserves all query variables of the currently active page, but allows you to specify &redir parameter and send a user to another page.

SelfReference Snippet — the very latest version
Last modified: 2010-01-09, 12:32 — Size: 985,00 B — Users: 49 — Downloads: 62

SelfReference Snippet (with redirect parameter)
Last modified: 2010-01-20, 19:57 — Size: 1,21 KB — Users: 29 — Downloads: 39

Write a comment

• Required fields are marked with *.
• Comments are published after the approval of the site moderator, who is a human rather than a wind-fast computer program so please be patient. Off-topic comments are definitely removed.

* Name:
* E-mail (never revealed on the page):
Subject:
* Comment:

* Code:
 

Enter this code into the appropriate field of the form while submitting an e-mail or a comment. If you have trouble with reading it, generate another...

Kristalin Chavdarov

Re: Self Reference Extended
Comment #1 on: 2010-01-04, 16:05

Hello,

this is good idea!
I just added one little line:

<a href="#topofpage" onclick="if($.browser.opera){$('html').animate({scrollTop: $('#topofpage').offset().top}, 3000);} else $('html,body').animate({scrollTop: $('#topofpage').offset().top}, 3000);">^top</a>

:)

Nice....