Make scroll to top button with animation in React

Question

I wanna add button, by clicking on which page will be scrolled back to the top with animation. I know how to realize that using JQuery. I tried this code:

import React, { Component } from 'react';

import $ from 'jquery';

import goUpNarrrowImage from '../static/img/goUpNarrow.png';

class GoTopButton extends Component {
  constructor() {
    super();

    this.onclick = this.onclick.bind(this);
  }

  render() {

    return ( 
      <button>
        <img src={goUpNarrrowImage} style={{
          display: "inline-block",
          marginRight: "10px"
        }} />
        наверх
      </button>
    );
  }

  onclick() {
    $("html, body").animate({ scrollTop: 0 }, 1000);
  }
}

export default GoTopButton;

But when I click the button nothing happens.

Miloš Janda · Accepted Answer · 2019-03-22 11:36:14Z

2

you can do it easily with react component like https://www.npmjs.com/package/react-scroll-up

<ScrollToTop showUnder={0} duration={1000} >
    <button>
        <img src={goUpNarrrowImage} style={{
          display: "inline-block",
          marginRight: "10px"
        }} />
    </button>
</ScrollToTop>

answered Mar 22, 2019 at 11:36

Miloš Janda

214 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hemadri Dasari · Accepted Answer · 2018-09-07 03:28:03Z

1

onclick is missing in button. So pass onclick to the button

<button onclick={this.onclick}>

answered Sep 7, 2018 at 3:28

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

3 Comments

Dils Matchanov Over a year ago

HELL BRUH! Thanks a lot!

Hemadri Dasari Over a year ago

We all make small mistakes very often. Cheers :)

ckeeney Over a year ago

While this answers the question and solves OP's issue, it's worth mentioning that mixing jQuery and react should almost never be used together.

Collectives™ on Stack Overflow

Make scroll to top button with animation in React

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related