Useful Snippets

We have created some really useful functionality which surely going to make your Website more interactive. Here are a few of them:

Smooth Scrolling to Same Page Sections

With Canvas you can turn pretty-much any Page into a One Page Website, which defines Smart Functionality. You can Point any Link, Button on a Page to an Element ID which on Clicking scrolls to that Element.

You can use this functionality by adding data-scrollto="#html-element-ID" attribute to a Button or a Link. Simply use the following Sample Code to use this functionality:

Note: You should have a Valid & Unique Element ID on the Page where you are planning to use the ScrollTo Functionality.

Code Example

<a href="#header" data-scrollto="#header" class="button button-3d">Scroll to Header</a>

Settings

Setting Description
data-offset

Offset Gap from Top after you Scroll to the HTML ID in pixels.

Ex: data-offset="100"

data-speed

Speed of the Scroll To Link in milliseconds.

Ex: data-speed="800"

data-easing

Easing of the Scroll to Link Scrolling.

Ex: data-easing="easeInQuad"

data-highlight

Highlight Color of the Section in HEX Color Codes after scrolling.

Ex: data-highlight="#FFFF00"

Note:Make sure that the .highlight-me Class is added to the Section you want to Highlight.

Last Modified: June 2, 2020