Step by Step - foundation

jQuery Page Scroll

Scroll from any link to any ID using a script
RSD jQuery


Class blue
Id yellow
Type pink
Attribute green
Attribute Value orange

This uses a script

Download the ZIP file
Open Settings
In the Footer copy the script
Paste that script into any Footer
on any page you want to use it on

It scrolls to an ID

The script will look for an ID automatically
ID's can only be used once and can't start with a number
On anything that can take ID any element row or column
You put in an ID name, that's where it will scroll to

It scrolls from a # (hashtag) link

On any linkable element
You put the hashtag ID name
So if goes to an ID of yourID
The link would be #yourID

Let's do one, a scroll to the top arrow

Copy/paste the script into the Footer
Double click on the existing rows column
In the ID use top

Add some scrollable content and an icon

In Layout ADD a row
Double click the column and make it Min-height 1500px
For now just add in 9 or 10 long paragraphs

The scroll to the top arrow

ADD a Font Icon Link to the column
I used the arrow-up6
Double click the icon and from Design
In the Href box add the link #top
In position select fixed
For the value use right 20px and bottom 20px

Preview ON

To see it work use preview on to see it in your browser
Scroll down to the very bottom and click on the icon
The #top link will scroll you up to the ID top column


The links

The script won't use just a # the default link in RSD
or a #no-link which will come in handy on some projects
By the way you use the link #no-link
so it won't jump to the top like a plain # will

You can adjust the speed

I think 1000 is a good speed but...
in the script you'll see this line
}, 1000, function() {
if you make the 1000 larger it'll go slower
smaller would be faster
for example change it to 4000 and try a preview on