No Smooth Scrolling when click on Nav-button

Archive
1

Hey guys,
i´m all new to this flat style CMS thing and currently trying to find out how everything works and where all the files are.
Nevertheless i´ve installed the Agency skeleton, but when i click on a Nav-button it does not scroll smoothly to the desired part of the page, it just jumps there.
You can find the page at http://volanti.ddns.net

And can anyone point me to where i can edit some things (or any tutorial on how to do so) ?

2

You’d need to add JavaScript-scrolling rather than the pure HTML one, ie. animating the transition there. A good tutorial: http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery

3

Thank you !! I really get what this would do, BUT … where is the jQuery file? My last website was 8 years ago xD
And just out of curiosity: Why is it not enabled in the Skeleton? (The demo shows smooth scrolling)

4

Agency uses the following code (agency.js):

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

You are including most files correctly, but not jQuery itself. Console returns the following on your site:

Failed to load resource: the server responded with a status of 404 (Not Found)
2015-11-24 16:09:40.775 bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
2015-11-24 16:09:40.784 jquery.easing.min.js:44 Uncaught ReferenceError: jQuery is not defined
2015-11-24 16:09:40.789 agency.js:8 Uncaught ReferenceError: $ is not defined

From your source I can see a script-inclusion of:

http://volanti.ddns.net/system/assets/jquery/jquery-2.1.4.min.js
--- 

But as seen from the first error, the file does not exist in the specified path.
5

Thank You mate !!!
I didn´t knew the browser console would print out errors!
It was a problem in my nginx config, rewriting a path for security.
You pointed me in the right direction, now it´s smooth =)

6

Just found a super simple fix for this. (OP problem I think?)

It’s annoying that the menu on a one page grav antimatter site does a smooth scroll down to the content but clicking on the Buttons within the header just jumps down quickly.

To make everything scroll smoothly when clicked - you need only change one word of code within the template file:

modular.html.twig

//line number for reference
19.        $('#body').singlePageNav({ 
            offset: $('#header').outerHeight(),
            filter: ':not(.external)',
            updateHash: true,
            currentClass: 'active'
        });

// ----> use #body rather than #header on line 19.

That solved the problem for me.

Also handy to know you need only add

class="external"

To links which you don’t want to scroll like this.

7

This has been fixed in the latest release: switch the body tag back to ‘header’ to fix it again.

8

Wait… It’s even better if you just use body without the #:

//line number for reference
19.        $('body').singlePageNav({ 
            offset: $('#header').outerHeight(),
            filter: ':not(.external)',
            updateHash: true,
            currentClass: 'active'
        });

// ----> use body rather than #header on line 19.