anchorate

Scroll to anchor links.

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.hashisn't empty, it'll scrollIntoViewfirst matching element by idor nameper 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 scrollerfunction 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
    }
  }
})

Repository

AndersDJohnson/anchorate


上一篇:formidable-charts
下一篇:hast-util-to-html

相关推荐

暂无相关文章

官方社区

扫码加入 JavaScript 社区