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?

Josie

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? – Josie

I gave you something good to start with. When you click on an item, get the offset off that item en scroll to the offset with jQuery animate. – Otherwise

yes i got them, I was able to scroll them up, but im having trouble with the next part of the animation of slideDown. i cannot quite achieve timing them the way Makr does. – Josie

You can alway use the delay-function: .delay(1000) to delay the function 1 second. api.jquery.com/delay Or set the slideDown in the complete function – Otherwise

Answer 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/

Otherwise

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? – Glycogen

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. – Otherwise

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

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

how exactly does jQuery achieve smooth scroll? – Pooi

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) – Nepos

Answer 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.

Deluxe

Answer 3

I just use:

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

Petronius

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

@Outvote 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}. – Avarice

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

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

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

that's seriously some weird logic – Outvote

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

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

});

Yuille

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

Answer 5

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.

Yaws

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. – Island

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. – Yaws

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? – Island

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

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

but how exactly does jQuery achieve smooth scroll? – Pooi