Canvas Support

Speaker Demo "GoToTop" arrow question

1 reply · opened Mar 20, 2023

Bb00mtasticMar 20, 2023

Hello,

I am trying to use the Speaker Demo "GoToTop" arrow for my page. An edited version of "demo-speaker.html" (now currently "index.html" on my site) works as intended - the arrow appears a short ways down and the circle around it follows the progress of the page until completion at the end. When I try to put the same code onto another page (events.html for instance), the arrow appears like it should but the circle doesn't show progression. Subsequent pages also show the same thing - it only seems to appear on the index, which makes me think I'm missing something. Or is that as intended?

Thanks in advance.

SSemicolon WebSTAFFMar 21, 2023

Hello,

Yes, you will need to add the JS Codes related to this functionality at the bottom of the Page. Consider using the following code:
[ch_pre]
//GotoTop
var cssPosGotoTop = getComputedStyle(document.querySelector('#gotoTop'));
var canvasPageScrollPos = (cssPosGotoTop.getPropertyValue('--cnvs-gotoTop-scroll'));
var canvasbodyHeight = document.body.offsetHeight;

window.addEventListener( 'scroll', function() {
	var scrollPercent = (jQuery(window).scrollTop()) / ((jQuery(document).height()) - (jQuery(window).height()));
	var getPercent = Math.round(scrollPercent*100);

	document.querySelector('#gotoTop').style.setProperty('--cnvs-gotoTop-scroll', ( 260 - (2.6 * getPercent) ) );
});

[/ch_pre]

This will definitely work fine. 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