Navigation between pages

1 reply · opened Nov 22, 2018

NNicoBootsNov 22, 2018

In making my website I have encountered the following problem, of which I am not sure if it caused by the canvas template or not. Maybe you can help.

I give the user the opportunity to navigate between separate pages using links such as Prijzen, where #Prijzen is the id of an element in the other page. Usually, when you click on this link you will be transferred to the other page with the selected element op top of the screen. However using the canvas template this does not work properly. After clicking on the link, you will go the next page but not with the selected element on top nor to the top of the page itself, but somewhere halfway. Can you explain what I do wrong?

See the navigation between the pages http://www.duepadroni.it/index.php and http://www.duepadroni.it/Activiteiten.php, with the links to "Prijzen" and "contact"

SSemicolon WebSTAFFNov 23, 2018

Hello,

There are 2 Issues related to this:

  1. Firstly, the data-offset="65" in the One Page Menu is set too low. So consider setting the value to higher number so that the Offset when the One Page link is clicked is according to your needs.

  2. When navigating between pages, the Default behavior of the Browser reacting to the #links is activated. To fix this, use the following code on the Page (where the #links 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