Breaking News: Grepper is joining You.com. Read the official announcement!

React Scroll

Add Answer

akileus answered on December 28, 2020 Popularity 10/10 Helpfulness 4/10

answer React Scroll

related react-scroll

related react scrollbar

related react scroll

related react-scroll

React Scroll

Comment

$ npm install react-scroll

# or yarn

$ yarn add react-scroll

ex)
import {Link} from 'react-scroll'
<Link  to="about" spy={true} smooth={true}>About</Link>
....	....	....	....
<div id="about" style={{height: 500}}>
  <h1>This is About section</h1>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, repellendus. Totam nihil similique a repellat minus dolor amet quasi. Corporis nulla quaerat iste, sed quasi ab dolorem maxime minima animi.
</div>

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: codesandbox.io

Tags: javascript react-scroll

Link to this answer
Share Copy Link

Contributed on Jul 16 2022

akileus

0 Answers Avg Quality 2/10

Closely Related Answers

react-scroll

Comment

$ npm install react-scroll

# or yarn

$ yarn add react-scroll

Popularity 10/10 Helpfulness 4/10 Language shell

Source: Grepper

Tags: react-scroll react-scro

Link to this answer
Share Copy Link

Contributed on Dec 28 2020

Salo Hopeless

0 Answers Avg Quality 2/10

react scrollbar

Comment

npm install react-scrollbar --save

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 25 2022

Nikita Goloveshko

0 Answers Avg Quality 2/10

react scroll

Comment

//Smooth Scroll in React js
function smoothScroll()
 {
    document.querySelector('.your_class or #id here').scrollIntoView(
     {
        behavior: 'smooth'
	 });
 };

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 05 2022

Mohammad Al Moussawi

0 Answers Avg Quality 2/10

react-scroll

Comment

// ES6 Imports
import * as Scroll from 'react-scroll';
import { Link, Button, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'

// Or Access Link,Element,etc as follows
let Link      = Scroll.Link;
let Button    = Scroll.Button;
let Element   = Scroll.Element;
let Events    = Scroll.Events;
let scroll    = Scroll.animateScroll;
let scrollSpy = Scroll.scrollSpy;

// ES5
var React  = require('react');
var Scroll = require('react-scroll');

var Link      = Scroll.Link;
var Button    = Scroll.Button;
var Element   = Scroll.Element;
var Events    = Scroll.Events;
var scroll    = Scroll.animateScroll;
var scrollSpy = Scroll.scrollSpy;

var Section = React.createClass({
  componentDidMount: function() {
    Events.scrollEvent.register('begin', function(to, element) {
      console.log('begin', arguments);
    });

    Events.scrollEvent.register('end', function(to, element) {
      console.log('end', arguments);
    });

    scrollSpy.update();
  },
  componentWillUnmount: function() {
    Events.scrollEvent.remove('begin');
    Events.scrollEvent.remove('end');
  },
  scrollToTop: function() {
    scroll.scrollToTop();
  },
  scrollToBottom: function() {
    scroll.scrollToBottom();
  },
  scrollTo: function() {
    scroll.scrollTo(100);
  },
  scrollMore: function() {
    scroll.scrollMore(100);
  },
  handleSetActive: function(to) {
    console.log(to);
  },
  render: function () {
    return (
      <div>
        <Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} onSetActive={this.handleSetActive}>
          Test 1
        </Link>
        <Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} delay={1000}>
          Test 2 (delay)
        </Link>
        <Link className="test6" to="anchor" spy={true} smooth={true} duration={500}>
          Test 6 (anchor)
        </Link>
        <Button activeClass="active" className="btn" type="submit" value="Test 2" to="test2" spy={true} smooth={true} offset={50} duration={500} >
          Test 2
        </Button>

        <Element name="test1" className="element">
          test 1
        </Element>

        <Element name="test2" className="element">
          test 2
        </Element>

        <div id="anchor" className="element">
          test 6 (anchor)
        </div>

        <Link to="firstInsideContainer" containerId="containerElement">
          Go to first element inside container
        </Link>

        <Link to="secondInsideContainer" containerId="containerElement">
          Go to second element inside container
        </Link>
        <div className="element" id="containerElement">
          <Element name="firstInsideContainer">
            first element inside container
          </Element>

          <Element name="secondInsideContainer">
            second element inside container
          </Element>
        </div>

        <a onClick={this.scrollToTop}>To the top!</a>
        <br/>
        <a onClick={this.scrollToBottom}>To the bottom!</a>
        <br/>
        <a onClick={this.scrollTo}>Scroll to 100px from the top</a>
        <br/>
        <a onClick={this.scrollMore}>Scroll 100px more from the current position!</a>
      </div>
    );
  }
});

React.render(
  <Section />,
  document.getElementById('example')
);

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 13 2023

Tigran Kocharyan

0 Answers Avg Quality 2/10

React Scroll

Contents

More Related Answers

React Scroll

Closely Related Answers

react-scroll

react scrollbar

react scroll

react-scroll

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.