Scroll to Point

Estimated time to complete: 3 minutes
Requirements: An account on NowButtons.com

Create an app-like experience by creating a button with a Scroll to Point action. With fast and smooth scroll that gently eases in and out, the visitors is being fast-tracked to a section of the page.

Step 1

When editing your button, find the Action pull down. For the Single Button this is directly visible; when creating a multi-action button (e.g. Buttonbar or Multibutton) click the Add action button first.

When editing a single button (left), the Action is directly visible. For the Multibutton and Buttonbar you will need to click <em>Add action</em> to reveal the setting.
When editing a single button (left), the Action is directly visible. For the Multibutton and Buttonbar (right) you will need to click Add action to reveal the Action selector.

Step 2

From the Action pull down menu, select the Scroll to Point action.

Select the Scroll to Point action from the Button type pull down menu.
Select the Scroll to Point action from the Button type pull down menu.

Step 3

The point you want the visitor to scroll to is called an Anchor. Next to Page anchor enter the anchor you want to scroll to. The anchor can be any of the following:

  1. Id attribute - this is the id attribute of an HTML element. This is the most common page and more traditional page anchor. The id attribute can be added to any HTML element. If you're editing content of your page, you generally have the option to add an id name to your content. Using that id here as the Page anchor will work as well. Be aware that elements can only have a single id attribute and an id must be unique on a page. When entering the id as the Page anchor, there is no need to add an hashtag # in front of it.
  2. Name attribute - the name attribute is most comming on form elements. If you want the visitor to quickly scroll to the first field of your form, you could enter the field's name attribute. E.g. first-name.
  3. Tag name (HTML) - this is the tag name of the HTML element on the page. Be aware that it scrolls to the first occurance on the page. So when using a tag name, be certain that it's pointing to the desired location.

Values are matched in this order as well. So when you have an ID with the same name as a tag name, the scroll will be to the tag name.

Enter the Page anchor you want the visitor to scroll to. In the example, the body HTML tag is used and will make the visitor scroll to the top of the page.
Enter the Page anchor you want the visitor to scroll to. In this example, the body HTML tag is used and will make the visitor scroll to the top of the page.

Step 4

Click Save at the bottom to save it.

Click Save to store your Scroll to Point action.
Click Save to store your Scroll to Point action.