How to display anchors (ID's) after clicking on the one page menu

6 replies · opened Feb 16, 2022

CcgartplFeb 16, 2022

Hello,
I'm using the one page menu on my website.
Is it possible to display the names of the anchors? Example: https://domainname.com/#start-section
It is currently hidden when I click on a menu item.
I am using the data-offset attribute and would not like to remove it. This allows the website to function properly.
When I remove the data-href or data-scrollto attribute then the offset doesn't work.

My HTML basic structure:


    
        
            Title
            
                
                    
- 
                        [
                            Start
                        ](#start)
                    
                    
- 
                        [
                            Second section
                        ](#second-section)
                    
                    
- 
                        [
                            Third section
                        ](#third-section)
                    
                
            
            
        
    
SSemicolon WebSTAFFFeb 17, 2022

Hello,

Thanks for your Patience!

This is currently not possible with the current JS Codes and needs some customization. We have customized the codes a bit for you which you can use to display a Hash at the end of the location. Consider updating the js/plugins.min.js File with the one attached to this reply.

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.

CcgartplFeb 18, 2022

Thank you for your help! :)
Could I have a non minified (uncompressed) plugins.js file please?

CcgartplFeb 18, 2022

Unfortunately I can see that the offset is not working after loading the new version of the file

SSemicolon WebSTAFFFeb 18, 2022

Hello,

We have tested the Codes and the Offsets appear to be working fine for us with the updated codes. Please provide us with a Live URL so that we can look into this issue.

We have attached the non-minified file.

Hope this Helps!

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

CcgartplFeb 21, 2022

The unminified file helped me a lot! It works very well.
I compared the files and made changes related to the following function only:

setTimeout( function(){
    let linkElementOff	= linkElement.offset().top;
    $('html,body').stop(true, true).animate({
        'scrollTop': linkElementOff - Number( linkElSettings.offset )
    }, Number(linkElSettings.speed), linkElSettings.easing, function(){
        if( history.pushState ) {
        history.pushState( null, null, linkElAnchor );
        } else {
        location.hash = linkElAnchor;
        }
    });
}, 250);

Previously (when I used the plugins.min.js file) there was a conflict related to updating libraries and minor code modifications.
Thank you for your help, the problem is solved :)

SSemicolon WebSTAFFFeb 21, 2022

Hello,

Very Happy to Help! :)

Glad the issue was resolved. We will look into the issues you have mentioned and release fixes if necessary.

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

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