Canvas Support

Smooth scrolling

2 replies·opened Jul 20, 2016
A
annaweaverJul 20, 2016

Hi

I have a multipage site, but the subnav in one menu item link to sections further down the page, and I would like to use smooth scrolling. I have used this code: <a href="#sec1" data-scrollto="#sec1">Scroll to Header</a> to turn on smooth scrolling, but it's not jumping to the right part of the page: the page scrolls to about 150px above #sec1, so it's not at the top of the window.

My page has a full screen slider image at the top page (which parallaxes) with all the text sections underneath.

If I remove the data-scrollto attribute, it goes to the correct place, with #sec1 appearing at the top of the window.

Also, if I link to the section from another page, using <a href="features.html#sec1">, the top of #sec1 is even further away, approximately in the center of the window. This seems to be getting confused with the slider image above all the sections. If I remove the slider-parallax class from the slider it goes to the correct place in the doc.

Any ideas?

Thanks.

S
SemiColonWebSTAFFJul 21, 2016

Hello,

  1. You can simply set the data-offset="0" Attribute to define the Number of Pixels you want to offset the scroll from top. Example:
<a href="#sec1" data-scrollto="#sec1" data-offset="0">Scroll to Header</a>
  1. 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 - 0
                }, 700, 'easeOutQuad');
            }, 1000);
        }
    });
</script>

This should definitely work fine. Let us know if we can help you with anything else or if you find any issues.

A
annaweaverJul 22, 2016

That's very helpful and works perfectly, thank you!

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