---
name: "up.reveal"
area: "API"
kind: "JavaScript function"
parent: "up.viewport module"
url: "https://unpoly.com/api/up.reveal"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.viewport module](https://unpoly.com/api/up.viewport.md)</nav>

# up.reveal(element, [options])

Scrolls the given element's viewport so the first rows of the element are visible for the user.

<nav aria-label="Guides">

- [Learn: Scrolling](https://unpoly.com/learn/scrolling.md#reveal)

</nav>

<nav aria-label="Contents">

#### Contents

- [Fixed elements obstructing the viewport](#fixed-elements-obstructing-the-viewport)
- [Parameters](#parameters)
- [Return value](#return-value)

</nav>

## Fixed elements obstructing the viewport {#fixed-elements-obstructing-the-viewport}

Many applications have a navigation bar fixed to the top or bottom, obstructing the view of an element.

You can make `up.reveal()` aware of these fixed elements so it can scroll the viewport far enough so the revealed element is fully visible. To make `up.reveal()` aware of fixed elements you can either:

- give the element an attribute [`up-fixed="top"`](https://unpoly.com/api/up-fixed-top.md) or [`up-fixed="bottom"`](https://unpoly.com/api/up-fixed-bottom.md)
- [configure default options](https://unpoly.com/api/up.viewport.config.md) for `{ fixedTopSelectors }` or `{ fixedBottomSelectors }`

---

## Parameters {#parameters}

### element {#element}

(required)

The element to reveal.

Type: string | [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | [jQuery](https://learn.jquery.com/using-jquery-core/jquery-object/)

### [options.snap] {#options.snap}

(optional)

When the revealed element would be closer to the viewport's top edge than this value, Unpoly will scroll the viewport to the top.

Set to `0` to disable snapping.

Defaults to [`up.viewport.config.revealSnap`](https://unpoly.com/api/up.viewport.config.md#config.revealSnap).

Type: number

### [options.top] {#options.top}

(optional)

Whether to scroll the viewport so that the first element row aligns with the top edge of the viewport.

Defaults to [`up.viewport.config.revealTop`](https://unpoly.com/api/up.viewport.config.md#config.revealTop).

Type: boolean

### [options.padding] {#options.padding}

(optional)

The desired padding between the revealed element and the closest [viewport](https://unpoly.com/api/up.viewport.md) edge (in pixels).

Defaults to [`up.viewport.config.revealPadding`](https://unpoly.com/api/up.viewport.config.md#config.revealPadding).

Type: number

### [options.behavior='instant'] {#options.behavior}

(optional)

When set to `'instant'`, this will immediately scroll to the new position.

When set to `'smooth'`, this will scroll smoothly to the new position.

When set to `'auto'`, the behavior is determined by the CSS property [`scroll-behavior`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) of the viewport element.

Type: string

### [options.viewport] {#options.viewport}

(optional)

The scrolling element to scroll.

Defaults to the [given element's viewport](https://unpoly.com/api/up.viewport.get.md).

Type: string | [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | [jQuery](https://learn.jquery.com/using-jquery-core/jquery-object/)

---

## Return value {#return-value}

Type: undefined