0

I'm using Zurb's Foundation to create a website. I'm using it's top-bar for my menu and made it sticky to the page. It's a single page, so to go to other parts of the page I want to use the topbar. When a user clicks on 'Contact', I want the page to scroll to the contact part (div with id="contact") of the website with a smooth scroll effect.

I've tried a lot of things, for example: animated autoscroll to div onclick
And: jQuery jump or scroll to certain position, div or target on the page from button onclick

But the fact is, whatever I try the page doesn't scroll. The funny thing is, it is showing an animation effect. But it doesn't go to the contact part, but to the top of the page.

Am I missing something obvious here? Or is it Zurb's Foundation that's interfering?

An example of the page can be found here: Out of date example

Any suggestion that helps to solve my incompetence would be appreciated!

Community
  • 1
  • 1
Sander
  • 223
  • 6
  • 17

2 Answers2

1

Your anchors are all working fine, but if you want a smooth scroll effect - similar to what would happen when using your mouses scroll wheel - you will need some jQuery plugin to do it.

Googling 'jquery smooth scroll' will provide a bunch of things you can use, the first entry for example is a GitHub link is the one I've used in various projects (https://github.com/kswedberg/jquery-smooth-scroll). All you need to do is pull in the jQuery file, initialise a specific class with smoothScroll() and then make any tag you want to scroll have that class.

It explains in detail how to use it in its readme file.

William Stewart
  • 841
  • 1
  • 14
  • 27
  • I actually fixed the navigation that it now jumps to the specific div. I will try and add the Smooth Scroll for the nice effect :) Thanks! – Sander Oct 16 '13 at 11:51
1

I have use this a lot. I forget where I 'borrowed' this from, so I don't know who to credit..

$(function() {
// Slow slides for internal links
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top - 30
            }, 1000);
            if ($(window).width() < 600)
            {
                $('nav ul').slideUp();
            }
            return false;
        }
    }
}); 
});
bockymurphy
  • 61
  • 1
  • 4