How to use the react-scroll.animateScroll.scrollTo function in react-scroll

To help you get started, we’ve selected a few react-scroll examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github coderZsq / coderZsq.practice.web / resume / react-resume / src / components / pc_navigation.js View on Github external
scrollTo(param) {
        let offset;
        if (param === "home") {
            offset = 0;
        } else if (param === "projects") {
            offset = this.$h("home");
        } else if (param === "github") {
            offset = this.$h("projects") + this.$h("home");
        } else if (param === "articles") {
            offset = this.$h("github") + this.$h("projects") + this.$h("home");
        } else if (param === "experience") {
            offset = this.$h("articles") + this.$h("github") + this.$h("projects") + this.$h("home");
        } else if (param === "contact") {
            offset = this.$h("experience") + this.$h("articles") + this.$h("github") + this.$h("projects") + this.$h("home");
        }
        animateScroll.scrollTo(offset);
    }
github cssinjs / cssinjs / src / components / Content / utils.js View on Github external
export function onAnchorClick(e) {
  const el = e.target

  if (el.getAttribute('ref') === internalAnchor) {
    e.preventDefault()
    const target = el.querySelector(`${el.getAttribute('href')}-`)
    if (target) {
      animateScroll.scrollTo(target.offsetTop)
    }
  }
}
github WarsawLO / warsawlo / src / pages / index.js View on Github external
scrollToContent = () => {
    animateScroll.scrollTo(window.innerHeight * 0.8)
  }
  render = () => {
github bharatari / utd-grades / client / src / routes / Results / View.js View on Github external
handleClick = (id) => {
    queryUtils.pushQueryParams(this.props.location, this.props.history, {
      section: id,
    });

    scroll.scrollTo(this.graphRef.current.offsetTop);
  };
  render() {
github fisshy / react-scroll / examples / basic / app.js View on Github external
                <li> <a> animateScroll.scrollTo(100)}&gt;Scroll To 100!</a></li>
                <li> <a> animateScroll.scrollToBottom()}&gt;Scroll To Bottom</a></li>
github olegnn / react-shopping-cart / src / helpers.js View on Github external
export const scrollFunction = (
  target: EventTarget,
  scrollPosition: number | (currentTarget: Element) => number,
  scrollAnimationConfig: Object,
) => void (
  target instanceof Element
  && animateScroll.scrollTo(
    typeof scrollPosition === 'function'
      ? scrollPosition(target)
      : scrollPosition,
    scrollAnimationConfig,
  )
);
github Josh-ES / react-here-maps / demo / components / Header.tsx View on Github external
public scroll(index: number): void {
        const element = document.querySelectorAll("article")[index] as HTMLElement;
        const scrollTop = element.offsetTop - 60;
        scroller.scrollTo(scrollTop);

        this.setState({
            activeDot: index,
        });
    }