Canvas Support

datascroll-to from external page

6 replies·opened Jan 14, 2018
J
jsanwebJan 14, 2018

Hi there! Thank you guys for this amazing theme, I love it. The website I've been working on is almost done, but I'm having a small issue with the datascroll-to to a page section from an external page. When I click the link, for example

<li><a href="index.html#section-services" data-scrollto="index.html#section-services"><div>Services</div></a></li>

from another page, it redirects and scrolls to the section correctly, but not to the exact top of the page section. I tried adding data-offset="0" in the a-tag, but to no avail.

J
jsanwebJan 15, 2018

Here's the live preview

S
SemiColonWebSTAFFJan 22, 2018

Hello,

Currently, the Scroll to Section functionality is not available from External URLs. However, you can simply add the following JS code at the bottom of the Page just after the js/functions.js JS File Linking to enable this: 

<script>
    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(){
                $('html,body').stop(true).animate({
                    'scrollTop': $( divScrollToAnchor ).offset().top - 100
                }, 700, 'easeOutQuad');
            }, 1000);
        }
    });
</script>

This will definitely work fine. Hope this Helps!

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

J
jsanwebJan 25, 2018

Thank you for your response!

I added the Javascript code right under the js/functions.js script tag, but it seems to be acting the same way, i.e. redirecting to the correct section on the external page, but not stopping at the top of the section.

When I opened up the JS console on Chrome Dev tools, I see there is an error TypeError: Cannot read property 'top' of undefined.

Just so I'm clear, I added the JS code to the about page and I want the links to redirect to the respective sections on the home page.

Thank you so much for your help!

J
jsanwebJan 25, 2018

These are two screenshots for the error in JS console.

S
SemiColonWebSTAFFJan 27, 2018

Hello,

Please add this JS Code in the Homepage.

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.

J
jsanwebJan 27, 2018

Thank you! It works now!

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