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