Design trends are constantly changing and something we are using in a lot of recent projects is animations triggered when the visitor scrolls to a certain point on the page. Here is a quick guide on how to detect if an element is scrolled into view and implement a CSS animation that is triggered by a jQuery scroll event.

See the code in action here: http://jsfiddle.net/vep4sryp/1/

The HTML

<div class="container"> <div class="inner box1">

<p>This text is static.</p>

<p>This text will have an animated entrance.</p>

The jQuery Scroll Detection

$(window).scroll(function(){ // This is then function used to detect if the element is scrolled into view function elementScrolled(elem) {

var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));

var els = $('.box2 p'),
  i = 0,
  f = function () {
    $(els[i++]).addClass('animated');
    if(i < els.length) setTimeout(f, 400);
  };
f();

91;/code&

93;

<h2>The CSS</h2> [code] .container { width: 100%; } .inner { width: 980px; margin: 0 auto; height: 500px; } .inner.box2 p { visibility: hidden; } .inner.box2 p.animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }

CSS Animation

@-webkit-keyframes fadeInUp { 0% {

opacity: 0;
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);

opacity: 1;
-webkit-transform: none;
transform: none;

opacity: 0;
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);

opacity: 1;
-webkit-transform: none;
transform: none;

This is just a basic example, and can be adapted to suit your needs. If you need something a bit more complex jQuery Waypoints another good solution to detect elements in the viewport.

We have also shown a basic CSS animation example, a great tool for CSS animations can be seen here.

If you found this tutorial helpful, or need some help implementing it into your website let us know in the comments.

The scrollTop() method in jQuery is used to set or return the vertical scrollbar position for the selected elements. With the help of this method, we can find the mouse scroll direction. Syntax:

$(selector).scrollTop(position)

Parameters: This method accepts single parameter position which is optional. It is used to specify the vertical scrollbar position in pixels. Return Value: It returns the vertical position of the scrollbar of selected element. Example:

The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.

An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0.

scrollTop can be set to any integer value, with certain caveats:

• If the element can't be scrolled (e.g. it has no overflow or if the element has a property of "non-scrollable"), scrollTop is 0.
• scrollTop doesn't respond to negative values; instead, it sets itself back to 0.
• If set to a value greater than the maximum available for the element, scrollTop settles itself to the maximum value.

When scrollTop is used on the root element (the

# scroller {
  overflow: scroll;
  height: 150px;
  width: 150px;
  border: 5px dashed orange;
}

# output {
  padding: 1rem 0;
}

4 element), the

# scroller {
  overflow: scroll;
  height: 150px;
  width: 150px;
  border: 5px dashed orange;
}

# output {
  padding: 1rem 0;
}

5 of the window is returned. .

Warning: On systems using display scaling, scrollTop may give you a decimal value.

A number.

In this example, try scrolling the inner container with the dashed border, and see how the value of scrollTop changes.

How to check if element is scrolled to top in JavaScript?

You can use the offset() method to obtain where an element is relative to the document, and you can use the scrollTop() method to figure out where the top of the document is. If the element offset is at 1000 and scrollTop is more than 1000, you know that you've scrolled the element above off the screen.

How do you scrollTo the top in jQuery?

In jQuery, the scrollTo() method is used to set or return the vertical scrollbar position for a selected element. This behavior can be used to scroll to the top of the page by applying this method on the window property. Setting the position parameter to 0 scrolls the page to the top.

How do you find the scroll position of an element?

To get or set the scroll position of an element, you follow these steps:.

First, select the element using the selecting methods such as querySelector() ..

Second, access the scroll position of the element via the scrollLeft and scrollTop properties..

How do you know if an element is scrollable?

Using scrollTop and scrollLeft properties Select the particular element. Use the scrollTop and scrollLeft properties. If these are greater than 0, scrollbars are present. If these are 0, then first set them to 1, and test again to know if getting a result of 1.