Scroll Element (with overflow-y: scroll property) Into View Smoothly

Introduction

This is a demo on displaying an element by scrolling to the
elements position. To demonstrate this, the sections will be filled
with dummy text to have it enough height so that scroll can be done.
I will simply add more text in the form of explanation just to increase
the content, along with helping to understand it in a better.

Here we use jQuery to help us in DOM manipulation. The contents
are placed inside article tag which has it's height set to 300px
with overflow-y set to scroll. So if the content height is greater
than 300px scrollbar appears. You can reduce the browser width so
that contents wraps and we have a better scroll area.

To view the demo, click the on the top navigation links. On
clicking the navigation link, the page will be scrolled down to
the corresponding section. The scrolling will be smooth and the
duration, scroll effect like easing can be specified.

In order to scroll smoothly we make use of jQuery.animate() API
which is explained at http://api.jquery.com/animate/ website.

Code Examples
<!-- html -->
<html>
<head></head>
<style>
    .content {
        height: 300px;
        overflow-y: scroll;
    }
</style>
<body>
    <header></header>
    <nav>
        <!-- link to navigation to sections -->
    </nav>
    <article class="content">
        <section>
            <div></div>
            <p></p>
        </section>
        <!-- more sections here -->
    </article>
</body>
</html>

// js
$('.content').animate({
    scrollTop: $(elemId).parent().scrollTop() + $(elemId).offset().top - $(elemId).parent().offset().top
}, {
    duration: 1000,
    specialEasing: {
        width: 'linear',
        height: 'easeOutBounce'
    },
    complete: function (e) {
        console.log("animation completed");
    }
});
Explanation

The scrollTop() method sets or returns the vertical position of
the scrollbar for the selected elements.
The offset() method allows us to retrieve the current position
of an element relative to the document.
The idea is add the current offset of the scrollbar with the
current offset of the element, and subtract the top offset of the
parent element, i.e., the area which is fixed below which the scroll
area beings.
Offset on an element relative to the document can be positive or
negative, depending on whether the element is yet to be scrolled
or the element has passed the scrolling.

As mentioned in the introduction section, in order to add a
smooth effect to scrolling, we make use of jQuery's animate
function. We could just use $('#elemId')[0].scrollIntoView()
but in that case, the scrolling is not smooth.

Just to add more content for scroll demonstation, the explanation
for $.animate() function is added from the jQuery website.
The .animate() method allows us to create animation effects on
any numeric CSS property. The only required parameter is a map
of CSS properties. This map is similar to the one that can be
sent to the .css() method, except that the range of properties
is more restrictive.

Animation Properties and Values

All animated properties should be animated to a single numeric
value, except as noted below; most properties that are non-numeric
cannot be animated using basic jQuery functionality (For example,
width, height, or left can be animated but background-color cannot be,
unless the jQuery.Color() plugin is used). Property values are treated
as a number of pixels unless otherwise specified. The units em
and % can be specified where applicable.
In addition to style properties, some non-style properties such
as scrollTop and scrollLeft, as well as custom properties, can
be animated.
Shorthand CSS properties (e.g. font, background, border) are not
fully supported. For example, if you want to animate the rendered
border width, at least a border style and border width other than
"auto" must be set in advance. Or, if you want to animate font size,
you would use fontSize or the CSS equivalent 'font-size' rather
than simply 'font'.
In addition to numeric values, each property can take the strings
'show', 'hide', and 'toggle'. These shortcuts allow for custom
hiding and showing animations that take into account the display
type of the element.
Animated properties can also be relative. If a value is supplied
with a leading += or -= sequence of characters, then the target
value is computed by adding or subtracting the given number from
the current value of the property.

More Explanation

Duration

Durations are given in milliseconds; higher values indicate slower
animations, not faster ones. The default duration is 400 milliseconds.
The strings 'fast' and 'slow' can be supplied to indicate durations
of 200 and 600 milliseconds, respectively.

Complete Function

If supplied, the complete callback function is fired once the
animation is complete. This can be useful for stringing different
animations together in sequence. The callback is not sent any
arguments, but this is set to the DOM element being animated. If
multiple elements are animated, the callback is executed once per
matched element, not once for the animation as a whole.

Step Function

The second version of .animate() provides a step option — a callback
function that is fired at each step of the animation. This function
is useful for enabling custom animation types or altering the animation
as it is occurring. It accepts two arguments (now and fx), and this
is set to the DOM element being animated.
Note that the step function is called for each animated property
on each animated element.