Canvas Support

URL ScrollTo Function

3 replies · opened Sep 22, 2020

CC0deysseusSep 22, 2020

Hi again!

In my endeavors to upgrade my Canvas template and refresh my associated website, I've come across the need to be able to link directly to things from other pages, but would like to implement a smooth-scrolling feature. Using hashes (#) makes the browser jump directly to the indicated section — whereas I would like the page to load, then scroll smoothly to the desired anchor. Is there currently a method for this in the template (either with hashes or anything else, such as a character that the URL function would be split on: perhaps a "?"), or would this be a custom code that goes into the onLoad: function(){} area in the function.js file?

Let me know, and thank you in advance! : )

SSemicolon WebSTAFFSep 24, 2020

Hello,

This is Already Supported in Canvas 6, however, this currently only works with the Built-In One Page Menus. Here is an Example: http://themes.semicolonweb.com/html/canvas/op-index.html#section-about .

Individual Link Scrollers are currently not supported out of the Box but you can consider using the following JS Codes at bottom of the Page after the js/functions.js File Linking:
[ch_pre type="js"]$(window).on('beforeunload', function() {
$(window).scrollTop(0);
});

$(document).ready( function(){
$(window).scrollTop(0);
});

jQuery(window).on('load', function(){
var divScrollToAnchor = window.location.hash;

if( jQuery(divScrollToAnchor).length > 0 ) {
	var t = setTimeout( function(){
		jQuery('html,body').stop(true).animate({
			'scrollTop': jQuery(divScrollToAnchor).offset().top - 80
		}, 700, 'easeOutQuad');
	}, 1000);
}

});[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

CC0deysseusOct 31, 2020

Hello!!
Apologies for the delay; upgrading the template has been a beast on my end! LOL!

So, I was able to implement the scrollto code above, and it works! Thank you, thank you!
It doesn't actually scroll like the One Page template, so I may have to look more into that... however, I'm noticing that no matter what I set the offset to, the page continuously scrolls to the same spot—which is further down on the page than I would like, since the top nav overlaps the section title. By 'offset' I mean the following code:

‘scrollTop’: jQuery(divScrollToAnchor).offset().top – 80

Regardless of whether or not I set the ".top- [value]" to (80, 200, 800, whatever), it doesn't seem to have an effect. Am I crazy? Or is this "normal", since this function is technically only valid on the One Page template?

Let me know! : ) Again, thank you for your help!

Here's a live link!
http://qa.c0deysseus.com/credits-attributions/#alohasushicore-picrew

SSemicolon WebSTAFFOct 31, 2020

Hello,

We have checked out your Website and the issue is that there is some JS Conflict on your Page. Please check your Browser's Developer Console and you will be able to find the JS Error on Line: 763. The error is with the unescaped quotes. Please make sure that you delete the quotes on this line and write them again in the Text Editor.

This should fix your error. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard