anchorate
Scroll to anchor links.
Last updated 2 years ago by andersdjohnson .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install anchorate 
SYNC missed versions from official npm registry.

anchorate

Scroll to anchor links.

Scroll to anchor links with client-side routes e.g. with history's listen, React Router's onUpdate, or Gatsby's onRouteChange. Register a listener to call this and when window.location.hash isn't empty, it'll scrollIntoView first matching element by id or name per spec.

Originally based on: https://github.com/reactjs/react-router/issues/394#issuecomment-220221604

Install

npm install --save anchorate

Use

history

import { anchorate } from 'anchorate'
import { createHistory } from 'history'
 
const history = createHistory()

history.listen(() => {
  anchorate()
})

React Router

import { anchorate } from 'anchorate'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'

function onUpdate () {
  anchorate()
}

// ...

render((
  <Router
    onUpdate={onUpdate}
    history={browserHistory}
  />
), document.getElementById('app'))

Gatsby

In gastby-browser.js:

import { anchorate } from 'anchorate'

exports.onRouteUpdate = () => {
  anchorate()
}

Customize the scrolling behavior

You can provide your own scrolling behavior by passing in a scroller function in an options object. It is expected that you return true if the scroll was successful.

anchorate({ 
  scroller: function (element) {
    if (!element) return false
    element.scrollIntoView({ behavior: 'smooth' })
    return true
  }
})

Getting results

You can provide a completion callback function in the options object to be informed when the operation has complete and if there were any errors. An error will be returned if the element referred to in the hash was not found.

anchorate({ 
  callback: function (error) {
    if (error) {
      // Do something
    }
  }
})

Current Tags

  • 1.2.3                                ...           latest (2 years ago)

6 Versions

  • 1.2.3                                ...           2 years ago
  • 1.2.2                                ...           2 years ago
  • 1.2.1                                ...           2 years ago
  • 1.1.0                                ...           4 years ago
  • 1.0.1                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 3
Last Month 13
Dependencies (1)
Dev Dependencies (8)

Copyright 2014 - 2016 © taobao.org |