# Smooth scroll

Enhance your site with a nice effect that slows down the scrolling when jumping to another part of your page.

## Usage

To gradually descrease the speed when you jump from one section of your page to another, for example with a to-top scroller, just add the `data-uk-smooth-scroll` attribute to an `<a>` element, that links to the ID of the section you want to target.

### Example

In our example we are using the heading Smooth scroll as target.

Go Up! Go Down!

### Markup

    <a href="#my-id" class="uk-button" data-uk-smooth-scroll>...</a>

## Offset

The offset-option adds a specified distance to the target when calculating the scroll position. The offset is passed via the data-attribute. The value can be positive to stop scrolling before the target or negative to stop scrolling after the target.

Data attribute | Description
--- | ---
`data-uk-smooth-scroll="{offset: 90}"` | Adds an offset, that stops scrolling 90px before the target.
`data-uk-smooth-scroll="{offset: -90}"` | Adds an offset, that stops scrolling 90px after the target.

### Example

This link scrolls the site to the headline "Smooth scroll" with an offset of `90px`.

This link scrolls the site to the headline "Smooth scroll" with an offset of `-90px`.

### Markup

    <a href="#my-id" data-uk-smooth-scroll="{offset: 90}">...</a>

    <a href="#my-id" data-uk-smooth-scroll="{offset: -90}">...</a>