Pergunta

I'm not sure how to call the effect, but can someone point me into a library that would help me do the same effect as this website?

http://www.makr.com

Basically, it moves up the row to the top of the page on mouse click. A code snippet, preferably jQuery, can help to, if there is no such specialized effect library for it.

Im not sure if i need to start another topic, but can anyone help me with a small jQuery snippet to achieve the whole effect of the Makr UI?

Foi útil?

Solução

You can animate the scrolltop of the page with jQuery.

$('html, body').animate({
    scrollTop: $(".middle").offset().top
 }, 2000);

See this site: http://papermashup.com/jquery-page-scrolling/

Outras dicas

You can give this simple jQuery plugin (AnimateScroll) a whirl. It is quite easy to use.

1. Scroll to the top of the page:

$('body').animatescroll();

2. Scroll to an element with ID section-1:

$('#section-1').animatescroll({easing:'easeInOutBack'});

Disclaimer: I am the author of this plugin.

I just use:

$('body').animate({ 'scrollTop': '-=-'+<yourValueScroll>+'px' }, 2000);

var page_url = windws.location.href;
var page_id = page_url.substring(page_url.lastIndexOf("#") + 1);
if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-" + page_id).offset().top
    }, 2000)
} else if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-" + page_id).offset().top
    }, 2000)
}

});

There is a jquery plugin for this. It scrolls document to a specific element, so that it would be perfectly in the middle of viewport. It also supports animation easings so that the scroll effect would look super smooth. Check out AnimatedScroll.js.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top