anchor links on same page scroll displaying underneath the header

3 replies · opened Jan 14, 2020

NnfolJan 14, 2020

Hello,

I have a page where ive used anchor links but when clicked the page does jump to the correct section but i have two issues.
1- the page doesnt scroll down nicely
2- the title of the section is obstructed by the header so you cant see it.

Thanks for your help.

SSemicolon WebSTAFFJan 14, 2020

Hello,

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Additionally, if you simply add a #page-section Link to your a[href] Tags, this will not automatically make your links scroll smoothly to your Page Sections since smooth-scrolling this is a jQuery related functionality. Make sure that you use the data-scrollto Attribute on the Links. Example:

[Scroll toPage Section](#)

This should definitely work fine. Hope this Helps!

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

NnfolJan 15, 2020

Hello,
Thank you so much for your help. Yes that worked. Page now looks great!

If i wanted to link to a specific section from another page (using the anchor ids) the offset from the top is not correct. Is there a way i can get the offset top to work in this case?

If i send you the link to my website will it show up on your public forum?

SSemicolon WebSTAFFJan 16, 2020

Hello,

When navigating from other pages, the Default behavior of the Browser reacting to the #hash is activated. To fix this, use the following code on the Page (where the #hash sections are present) at the bottom just after the js/functions.js JS File linking:


    jQuery(document).ready( function(){
        setTimeout(function() {
            if (location.hash) {
                window.scrollTo(0, 0);
            }
        }, 1);
    });

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

        if( typeof divScrollToAnchor !== 'undefined' ) {
            var t = setTimeout( function(){
                jQuery('html,body').stop(true).animate({
                    'scrollTop': jQuery( divScrollToAnchor ).offset().top - 100
                }, 700, 'easeOutQuad');
            }, 1000);
        }
    });

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any 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