# post-hopper

> Javascript Function for scrolling between elements in a web page using IntersectionObserver

Latest version **0.1.2** (published 2017-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install post-hopper
pnpm add post-hopper
yarn add post-hopper
bun add post-hopper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2017-09-20 |
| First published | 2017-09-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | John Reinier Bulaong |
| Maintainers | jzumun |

## Links

- npm: https://www.npmjs.com/package/post-hopper
- Repository: https://github.com/JZumun/post-hopper
- Homepage: https://github.com/JZumun/post-hopper#readme
- Issues: https://github.com/JZumun/post-hopper/issues
- npm.io page: https://npm.io/package/post-hopper

## Dependencies (1)

- [animated-scroll-to](https://npm.io/package/animated-scroll-to.md) ^1.1.6

## Recent versions

- 0.1.2 (latest) — 2017-09-20
- 0.1.1 — 2017-09-19
- 0.1.0 — 2017-09-19

## README

# PostHopper
Javascript function for animated scrolling between elements in a web page using IntersectionObserver. Check out the [demo page](https://jzumun.github.io/post-hopper/demo/) for an example.

# Usage
`PostHopper` can be used both in node and in the browser.

Sample usage follows:
```javascript
  const hopperInstance = new PostHopper({
    container: "#scrollable-element", //optional selector string or element, defaults to window
    posts: ".element-selector", //selector string or array of elements
    onChangeActive: function(activeElement,previousActiveElement, hopperInstance) {
      //...
    }
  });

  /* INSTANCE PROPERTIES */
  hopperInstance.observer     // IntersectionObserver instance being used.
  hopperInstance.container    // undefined if window, otherwise is scrollable element from params
  hopperInstance.posts        // array of elements to jump between, based from params
  hopperInstance.active       // element in posts array currently in viewport
  hopperInstance.activeIndex  // index of active element in posts array
  hopperInstance.previous     // previous element in array if partially in viewport, otherwise is active element
  hopperInstance.next         // next element in array

  /* INSTANCE METHODS */
  hopperInstance.goToNext() // scrolls to next post
  hopperInstance.goToPrev() // scrolls to top of current post
                            //   or to previous post if previous post is partially in viewport.
  hopperInstance.destroy()  // disconnects IntersectionObserver instance and removes references to container and posts.
```

---
_Source: https://npm.io/package/post-hopper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._