Smooth Scrolling in ReactJS

Developer
Brian
Size
4,005 Kb
Views
38,456
  1. Smooth Scrolling in ReactJS Previews
  2. Smooth Scrolling in ReactJS HTML Codes
  3. Smooth Scrolling in ReactJS CSS Codes
  4. Smooth Scrolling in ReactJS JS Codes

How do I make an smooth scrolling in reactjs?

I was working on a ReactJS project and didn't want to use jQuery to do the smooth scroll animations, so here is a simple example of how to accomplish the same with JS. The smoothScroll var would be required in module.. What is a smooth scrolling in reactjs? How do you make a smooth scrolling in reactjs? This script and codes were developed by Brian on 22 November 2022, Tuesday.

Smooth Scrolling in ReactJS Previews
IQ Test

Smooth Scrolling in ReactJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smooth Scrolling in ReactJS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Smooth Scrolling in ReactJS - Script Codes CSS Codes

body { color: white; background: #1c1c1f;
}
.main { font: 16px / 1 Arial; position: relative;
}
.smooth-scroll { padding: 50px;
}
.smooth-scroll--spacer { border: 1px dashed #fff; height: 2000px;
}
.smooth-scroll button { color: #000; font: bold 18px/1 Arial; margin: 10px 0; padding: 10px; width: 100%;
}

Smooth Scrolling in ReactJS - Script Codes JS Codes

"use strict";
var App = React.createClass({	displayName: "App",	render: function render() {	return React.createElement(	"div",	null,	React.createElement(SmoothScroll, null)	);	}
});
var smoothScroll = {	timer: null,	stop: function stop() {	clearTimeout(this.timer);	},	scrollTo: function scrollTo(id, callback) {	var settings = {	duration: 1000,	easing: {	outQuint: function outQuint(x, t, b, c, d) {	return c * ((t = t / d - 1) * t * t * t * t + 1) + b;	}	}	};	var percentage;	var startTime;	var node = document.getElementById(id);	var nodeTop = node.offsetTop;	var nodeHeight = node.offsetHeight;	var body = document.body;	var html = document.documentElement;	var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);	var windowHeight = window.innerHeight;	var offset = window.pageYOffset;	var delta = nodeTop - offset;	var bottomScrollableY = height - windowHeight;	var targetY = bottomScrollableY < delta ? bottomScrollableY - (height - nodeTop - nodeHeight + offset) : delta;	startTime = Date.now();	percentage = 0;	if (this.timer) {	clearInterval(this.timer);	}	function step() {	var yScroll;	var elapsed = Date.now() - startTime;	if (elapsed > settings.duration) {	clearTimeout(this.timer);	}	percentage = elapsed / settings.duration;	if (percentage > 1) {	clearTimeout(this.timer);	if (callback) {	callback();	}	} else {	yScroll = settings.easing.outQuint(0, elapsed, offset, targetY, settings.duration);	window.scrollTo(0, yScroll);	this.timer = setTimeout(step, 10);	}	}	this.timer = setTimeout(step, 10);	}
};
var SmoothScroll = React.createClass({	displayName: "SmoothScroll",	render: function render() {	return React.createElement(	"div",	{ className: "smooth-scroll" },	React.createElement(	"button",	{ id: "top", onClick: this.handleTopClick },	"scroll to bottom"	),	React.createElement("div", { className: "smooth-scroll--spacer" }),	React.createElement(	"button",	{ id: "bottom", onClick: this.handleBottomClick },	"scroll to top"	)	);	},	handleTopClick: function handleTopClick() {	smoothScroll.scrollTo('bottom');	},	handleBottomClick: function handleBottomClick() {	smoothScroll.scrollTo('top');	}
});
React.render(React.createElement(App, null), document.getElementById('app'));
Smooth Scrolling in ReactJS - Script Codes
Smooth Scrolling in ReactJS - Script Codes
Home Page Home
Developer Brian
Username brian-baum
Uploaded November 22, 2022
Rating 3
Size 4,005 Kb
Views 38,456
Do you need developer help for Smooth Scrolling in ReactJS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brian (brian-baum) Script Codes
Name
JQuery countdown plugin
ReactJS Image Carousel
JQuery hash nav plugin
AngularJS contact list
CSS dropdowns
ReactJS Accessible Accordion Panel
Responsive demo page
JQuery exercise
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!