Smooth scroll

TUTORIAL LINK | HOME

The arrow icon scrolls you to this top column for example.
The scroll speed for all but the TOP button is adjusted from 500
to 1000 using data-animation-duration
smooth scroll on the foundation site
Foundation 6.4.1

This header column has the ID top
The arrow icon has the link #top and the attribute data-smooth-scroll
Plus the attribute data-animation-duration with the value of 1000

Section 3

The above button has the link #section3 and the attribute data-smooth-scroll

Picture 2

The above text has the link #picture2 and the attribute data-smooth-scroll


Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Placeholder Picture

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Placeholder Picture This picture has the ID picture2
Use the arrow or the click on
the picture to go back to the top

This column has the ID section3

Top

The above button has the default speed of 500 so you can see the difference

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Placeholder Picture