76

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?

Marvzz
  • 1,535
  • 3
  • 15
  • 22
  • 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? – Marvzz Nov 10 '11 at 04:02
  • 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. – Mathieu Nov 10 '11 at 07:43
  • 1
    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. – Marvzz Nov 10 '11 at 11:03
  • You can alway use the delay-function: .delay(1000) to delay the function 1 second. http://api.jquery.com/delay/ Or set the slideDown in the complete function – Mathieu Nov 10 '11 at 12:49

5 Answers5

221

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/

Mathieu
  • 3,073
  • 1
  • 19
  • 25
  • 4
    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? – Daniel Jan 10 '13 at 13:08
  • 2
    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. – Mathieu Jan 10 '13 at 13:32
  • 18
    `$('html, body')` is for ie8 compatibility. – Szymon Wygnański Apr 05 '13 at 14:41
  • 2
    $('html, body') is also for safari – honk31 Sep 17 '14 at 15:17
  • how exactly does jQuery achieve smooth scroll? – oldboy Nov 10 '20 at 07:52
  • 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) – Bob Stein Dec 29 '21 at 16:04
5

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.

Ram Patra
  • 16,266
  • 13
  • 66
  • 81
1

I just use:

$('body').animate({ 'scrollTop': '-=-'+<yourValueScroll>+'px' }, 2000);
Ngô Đức Tuấn
  • 71
  • 6
  • 1
    can you explain what are you trying to do with the '-=-'? are you trying to typecast the number or something? – user151496 Nov 26 '15 at 16:06
  • @user151496 Take a look at jQuery's documetation http://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}`. – natevw Mar 18 '16 at 22:31
  • @user151496 the first '-' is decrease value and the second '-' if meet value negative they become to positive and opposite. :) – Ngô Đức Tuấn Apr 08 '16 at 04:47
  • i understand what -= and - does. i just don't know why wouldn't he use += instead :S – user151496 Apr 08 '16 at 08:52
  • @user151496 if use += maybe in case scroll go down instead go up that he want. :) – Ngô Đức Tuấn Apr 09 '16 at 02:32
  • that's seriously some weird logic – user151496 Apr 09 '16 at 22:28
  • What kind of language program that you use for this? :), I'm use asp and I visit here :) – Ngô Đức Tuấn Apr 10 '16 at 09:39
1
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)
}

});

Ragnarök
  • 9
  • 4
0

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.

Ry-
  • 218,210
  • 55
  • 464
  • 476
Eugene Tiurin
  • 4,019
  • 4
  • 33
  • 32
  • 4
    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. – ChaseMoskal Nov 28 '13 at 23:47
  • 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. – Eugene Tiurin Nov 29 '13 at 14:18
  • 1
    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? – ChaseMoskal Nov 30 '13 at 05:18
  • right, as far as you wouldn't mind to write so much code every time you need to scroll to a specific element – Eugene Tiurin Dec 02 '13 at 12:08
  • 1
    @EugeneTiurin You could just create a custom function, taking the element as a parameter. – Jarrod Mosen Oct 05 '16 at 23:28
  • but how exactly does jQuery achieve smooth scroll? – oldboy Nov 10 '20 at 07:55