HTML5/jQuery - Vertical Page Sliding

Question

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!

Have you looked at the scripts of the pages you have seen. That should help you to build your own solution. — Sven Bieder, Mar 15 '12 at 19:40

Jasper · Accepted Answer · 2012-03-15T19:49:05.630

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.

score 0 · Answer 2 · answered Mar 15 '12 at 19:41

0

Look for the scrollTo plugin. http://flesler.blogspot.com/2007/10/jqueryscrollto.html

answered Mar 15 '12 at 19:41

romainberger

4,563
2
35
51

calebds · Answer 3 · 2012-03-15T19:47:46.620

0

For the "following" menu, have a look at fixed positioning. CSS position: fixed elements always

remain in the same place relative to the viewport, after scrolling

DEMO

edited Mar 15 '12 at 19:47

answered Mar 15 '12 at 19:42

calebds

25,670
9
46
74

I see! Thanks a lot. One question though. I see that the fixed items are .. fixed.. But how can I make an effect, that when the screen becomes higher, the fixed items "sticks" to the top of the page. With a Jquery effect. If you know what I mean. – oliverbj Mar 15 '12 at 19:55

score 0 · Answer 4 · answered Mar 15 '12 at 19:54

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');                  
        }
    });
});

HTML5/jQuery - Vertical Page Sliding

4 Answers4