Scroll speed

Control the scroll speed of your page with custom attributes.

elements
This video features an old UI. Updated version coming soon!

Using HTML attributes (additional information we attach to an element) allows us to add custom data to our project. And the stored (custom) data can be used on the page to create a more engaging user experience, like how fast to scroll to an element on the page. 

In this lesson:

  1. Add a section ID
  2. Set up your link 
  3. Configure the scroll time

Add a section ID

Section links or anchor links allow you to link to specific sections in a webpage. To create an anchor link, you'll first need to set an element ID on that section.

You can assign an ID to any select element in the Settings panel (D).

Assign an ID to an element
An element ID should be unique for each element. It must contain at least one character and cannot contain any space characters.

Set up your link 

  1. Select the link element that you want to take you to a section on your page
  2. In the settings panel, select the section ID from the page section dropdown menu

Configure the scroll time

Now, if you want to change the default scroll speed - we need to select our Body element, and then go over to our element settings where we can add a custom-attribute, data-scroll-time.

Adding custom attributes

  1. Select the Body element
  2. Go to the Element settings panel (D)
  3. Add [+] a custom attribute
  4. Specify the name (e.g. data-scroll-time)
  5. Add the value (e.g. 3)
  6. Save the attribute

Learn more about using Custom attributes here.