Reputation: 577
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.
Upvotes: 4
Views: 7657
Reputation: 21
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>
Upvotes: 2
Reputation: 34014
onclick is missing in button. So pass onclick to the button
<button onclick={this.onclick}>
Upvotes: 1