RSD TUTORIALS

Step by Step - foundation

Smooth Scroll

Scroll from any link using an attribute of data-smooth-scroll to any unique ID
RSD foundation 6.4.1


Colors

Class blue
Id yellow
Type pink
Attribute green
Attribute Value orange

Smooth scroll goes to an ID

ID's can only be used once and can't start with a number
On anything that can have an ID, any element row or column
You put in the unique ID name, that's where it will scroll to

Smooth scroll comes from a # (hashtag) link

On any linkable element
You put the hashtag ID name 
and the custom attribute data-smooth-scroll
You use custom since it's not in the dropdown list as yet
So if goes to an ID of yourID
The link would be #yourID
with that attribute

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

Double click on the existing rows column
In the ID use top

Add some scrollable content

In Layout ADD a row
Double click the column and make it Min-height 1500px

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 ATTRIBUTES select custom
RSD doesn't have the one we need yet
and copy/paste data-smooth-scroll
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

CUSTOMIZING SMOOTH SCROLL

A menu in a column

If you have a menu in one column
you can add the attribute data-smooth-scroll
to the column for all the links
instead of each one individually

The scroll speed

The default speed is 500
To make it scroll slower
Where you added the data-smooth-scroll attribute
You also add the ATTRIBUTE data-animation-duration
for the attribute value use 1000
or what ever you prefer

If you want an offset

Say you have a picture or menu
and you want the scroll to go above it
where you added data-smooth-scroll
also add the custom attribute data-offset
and a number for the attribute value
100 would be 100px above for example
-100 would be 100px below (or past)