Reputation: 6052

HTML5/jQuery - Vertical Page Sliding

I have seen websites where they have some links in the top, and when you click example the first link, you are being scrolled down (the jQuery scroll down effect) on the page, to the id (#) you clicked on. (The menu with the links is following you). You can then click on another link, and you are being taken further down the page.

I can't fint a name for this technique, my search on vertical page sliding didn't return what I was hoping for.

Tumblr.com have something like this, just not exactly what I am looking for. http://www.w3.org/html/logo have something like this also, the only thing missing here is the menu following down, when the page is scrolling.

Can anyone help me shed some light on this? Or give me some examples?

Thanks in advance!

Upvotes: 2

Answers (4)

Zach Lysobey

Reputation: 15714

I've been using a modified version of this JQuery code:

// animate to anchor link
$('nav a').click(function() {
   $('nav li').removeClass('selected');
   $(this).parent().addClass('selected');
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 500);
   return false;
});  
// update active links on scroll
$(window).scroll(function(){
    var pos = $(window).scrollTop();
    var height =  $(window).height();

    $('nav li').each(function(){
        if( ( pos >= $(this).offset().top )){
            $('nav li').removeClass();
            $(this).addClass('selected');                  
        }
    });
});

Upvotes: 0

Jasper

Reputation: 75993

All you do is get the vertical offset of the element you want to scroll to, then animate the scrollTop property for the window element (or whatever element you're scrolling):

//bind to all links whose `href` attribute starts with a hash
$('a[href^="#"]').on('click', function () {

    //get the offset from the document's top for the element targeted in the links `href` attribute
    var offset = $($(this).attr('href')).offset().top;

    //scroll the document, some browsers use `html`, some use `body`
    $('html, body').stop().animate({ scrollTop : offset }, 1000);
});

Here is a demo: http://jsfiddle.net/wCgA7/1/

Notice that if you give the navigation position:fixed you can dock it to the top of the view-port.

Upvotes: 2