Scroll to Point

Estimated time to complete: 3 minutes
Requirements: Call Now Button plugin installed

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 Button Type 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 button type 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), Button type is directly visible. For the Multibutton and Buttonbar (right) you will need to click Add action to reveal the Button type setting.

Step 2

From the Button type 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. 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.
  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. 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.

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 Changes at the bottom to save it.

Click Save Changes to store your changes.
Click Save Changes to store your changes.