Creating a 'return to top' link in an A-Z asset

(David Avery) #1

Hi all,

 

I've recently created an A-Z asset list on Squiz with around 190 items, and it works perfectly. You click on a letter (a-z) at the top and it takes you to the specific anchor that relates to that letter. Unfortunately I can't find any options to implement a 'return to top' link after every letter section which will easily return the user to the top. 

 

If a user clicks on the letter Z they will have to manually scroll all the way to the top of the page to choose another letter, which is obviously very time consuming when there are around 190 different listed items. What I wanted to implement was a simple text 'Return to top' link after every letter section to effortlessly return the sender to the top. I know how the mechanics would work (Anchors etc) but can't find any option to implement it, and seeing as the A-Z asset list is a nested div inside the page I can't exactly break up the div and start prodding around (or can I?)

 

Any help would be greatly appreciated!

 

Many thanks,

 

Dave

(David Avery) #2

Consider this post closed, I've already sorted it. And if anyone else has the same problem here is what I did. (Can't stand it when people just say they simply sorted it and then the post closes :P)

 

1) Add an anchor anywhere on the standard page e.g. <a name="x">

2) Go to you asset list details and scroll down to 'A-Z letter format' (if using a-z letter format like myself)

3) It should have a default of  <h3> %letter_group% </h3> , add in  <a href="#x">Return to top</a> before the letter group. Or just paste this into that box - <a href="#x">Return to top</a><h3> %letter_group% </h3>

4) Look at your standard page that you have nested the asset list in and the link "Return to top" will be present above all of the letter sections!

 

If you have any queries or further questions, don't hesitate to message me!

(Tom Chadwin) #3

Won't that put a return to top link above "A"?

(Nic Hubbard) #4

What I would do is have a "Return to Top" link that has anchored to the bottom of the browser window, using position:fixed. That way, it will always be there for the user to click, but you don't have to have a repeating link over and over.

 

I think it is the best solution for this sort of UI.

(David Avery) #5

Hi Tom, it puts a link above every letter.

 

Hi Nic, I tried implementing something like that and it didn't work too well, I then went onto creating a small div that scrolled with the page using javascript. The only problem being that if people didn't have JS enabled or were on older browsers it didn't work. 

 

Anyhow, it's fine like it is at the moment, and is only a place holder for a page that we will hopefully soon be replacing it with.

 

Many thanks again for the help :)

(Nic Hubbard) #6

Hi Nic, I tried implementing something like that and it didn't work too well, I then went onto creating a small div that scrolled with the page using javascript. The only problem being that if people didn't have JS enabled or were on older browsers it didn't work. 

 

It is very easy to do this with only CSS. Take a look at this example I built: http://jsfiddle.net/Gdrn2/

#7

Wouldn’t group formats sort this? There shouldn’t be a need for a link in every standard page?

#8

Sorry ignore me ha ha . You guys have it sorted.

(David Avery) #9

Wow Nic, that is really simple, however, we've now moved to using multiple page, so when the user clicks on the letter they want it displays the options directly under the a-z links. Anyhow, I want to thank everyone for the amount of time they've put into this for me :)

 

Many thanks,

 

David