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?
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?
5 Answers
You can animate the scrolltop of the page with jQuery.
$('html, body').animate({
scrollTop: $(".middle").offset().top
}, 2000);
See this site:
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.
