# @cubetech/js-hashscroll

> jQuery function to provide smooth scrolling to an element which matches a URL hash.

Latest version **1.3.0** (published 2018-08-06) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @cubetech/js-hashscroll
pnpm add @cubetech/js-hashscroll
yarn add @cubetech/js-hashscroll
bun add @cubetech/js-hashscroll
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2018-08-06 |
| First published | 2018-08-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mark Howells-Mead |
| Maintainers | acki, markhowellsmead |
| Keywords | jquery, scroll, smooth, scroll |

## Links

- npm: https://www.npmjs.com/package/@cubetech/js-hashscroll
- npm.io page: https://npm.io/package/@cubetech/js-hashscroll

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2018-08-06

## README

# Smooth anchor scrolling

jQuery script which checks the page URI for an anchor and scrolls to the target element smoothly.

## Usage

* Add an `id=` attribute to the element to which you want to scroll, which must match the location hash in the browser. e.g. `id="comments"`.
* Link to this element as usual: e.g. `<a href="#comments">Scroll to comments</a>`.
* Initialize the JavaScript.

### Initialize the JavaScript

```javascript
$('a[href*="#"]').anchorAnimate();
```

### Scrolling manually

```javascript
$('#comments').scrollToMe();
```

### Adding an offset

e.g. if you have a fixed toolbar. Update the value of the JavaScript variable `window.anchorAnimateOffset`.

```javascript
// General offset
window.anchorAnimateOffset = 16;

// Extend window.anchorAnimateOffset variable with your fixed elements
var setAnchorOffset = function(){
	$('.nav.toolbar').each(function(){
		if ( $(this).outerHeight() && $(this).css("position") === "fixed"){
			window.anchorAnimateOffset += $(this).outerHeight();
		}
	});
	window.anchorAnimateOffset = Math.floor(window.anchorAnimateOffset) - 1;
};

// Initialize the functionality
$(document).on('ready.anchoranimate', function(){
	$('a[href*="#"]').anchorAnimate();
});

// Update window.anchorAnimateOffset value
$(window).on('load.anchoranimate resize.anchoranimate', setAnchorOffset);

```

### Following events are triggered

```javascript
$(window).trigger('ct-hashscroll/scroll-start', window.anchorAnimateOffset, destinationTop);
```

### Example of responding to a custom event

```javascript
$(window).on('ct-hashscroll/scroll-start', function(event, anchorAnimateOffset, destinationTop){
    window.console.log([anchorAnimateOffset, destinationTop]);
});
```

## Changelog

### 1.3.0 2018-08-06

* Move to new @cubetech scope.

### 1.2.1 2018-08-06

* Update README

### 1.2.0 2018-08-06

* Apply `anchorAnimateOffset` variable to the global `window` object.

### 1.1.0 2018-08-06

* Add custom event for use in debugging.

### 1.0.2 2018-08-06

* Add example of how to scroll to an element manually.

### 1.0.1 2018-08-06

* Fix package description

### 1.0.0 2018-08-06

* Initial version

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