jQuery animate scroll

Question

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?

Solution 1

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/

Solution 2

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.

Solution 3

I just use:

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

Solution 4

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

});

View more solutions

Comments

[Daniel]

I've only needed to use #("body").animate(...); and it worked for firefox, chrome, and ie. Is there a specific case for also attaching the animation to the html DOM object?

[Mathieu]

The '$(".middle").offset().top'-part is to get the offset of that object (class,id,...), so the page knows what height to scroll to. If you want to scroll to a certain div that is located half-way the page, this can be usefull.

[Szymon Wygnański]

$('html, body') is for ie8 compatibility.

[ChaseMoskal]

I would avoid using a plugin like this, when the real answer is natively supported. $('html,body').animate({scrollTop:x},t); is plenty correct, no need to add an unnecessary plugin to your page's network tab.

[Eugene Tiurin]

You're absolutely right, except that this plugin is able to scroll to any document element, so that it would be exactly in the middle of window viewport.

[ChaseMoskal]

The problem is, that's still really easy without any plugins. It's just a matter of scrolling to ($e.offset().top+($e.height()/2))-($(window).height()/2), or in English, "elementCenter minus halfViewportHeight". Right?

[Eugene Tiurin]

right, as far as you wouldn't mind to write so much code every time you need to scroll to a specific element

[honk31]

$('html, body') is also for safari

[user151496]

can you explain what are you trying to do with the '-=-'? are you trying to typecast the number or something?

[natevw]

@user151496 Take a look at jQuery's documetation api.jquery.com/animate under the paragraph that currently starts "Animated properties can also be relative." Just like in JS you can say myVar += 10 to add ten to an existing value, this snippet is basically using jQuery's custom parsing to effect a similar goal: scrollTop -= -yourScrollValue. I cannot say for sure why the OP here chose that over a simpler {scrollTop: '+= '+value}.

[Ngô Đức Tuấn]

@user151496 the first '-' is decrease value and the second '-' if meet value negative they become to positive and opposite. :)

[user151496]

i understand what -= and - does. i just don't know why wouldn't he use += instead :S

[Ngô Đức Tuấn]

@user151496 if use += maybe in case scroll go down instead go up that he want. :)

[user151496]

that's seriously some weird logic

[Ngô Đức Tuấn]

What kind of language program that you use for this? :), I'm use asp and I visit here :)

[Jarrod Mosen]

@EugeneTiurin You could just create a custom function, taking the element as a parameter.

[Jason]

Code only answers are discouraged. Please add a simple explanation.

[oldboy]

how exactly does jQuery achieve smooth scroll?

[oldboy]

but how exactly does jQuery achieve smooth scroll?

[Bob Stein]

In 2021 $('body') does not work in Chrome nor Firefox, only $('html') does. So of course the way to go is: $('html, body'). By the way none of these work either: $(window), $(window.document), $(window.document.body)