CODEWITHSUNDEEP
jqueryuser-interfacescrolleffects
Marvzz
Marvzz

Reputation: 1565

jQuery animate scroll

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?

Upvotes: 77

Views: 132532

Answers (5)

Ram Patra
Ram Patra

Reputation: 16672

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.

Upvotes: 5

Ragnarök
Ragnarök

Reputation: 9

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

});

Upvotes: 1

Ngô Đức Tuấn
Ngô Đức Tuấn

Reputation: 71

I just use:

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

Upvotes: 1

Eugene Tiurin
Eugene Tiurin

Reputation: 4139

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.

Upvotes: 0

Mathieu
Mathieu

Reputation: 3093

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/

Upvotes: 223

Related Questions