Skip to content

Commit b1030c3

Browse files
fisshyfisshy
committed
added next.js example
1 parent 9cbb8ac commit b1030c3

File tree

4 files changed

+384
-2
lines changed

4 files changed

+384
-2
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@ Live example
4848
4949
> [Code](https://github.com/fisshy/react-scroll/blob/master/examples/basic/app.js)
5050
51+
Code example
52+
53+
> [Next.js](https://github.com/fisshy/react-scroll/blob/master/examples/next.js/page.tsx)
54+
5155
### Usage
5256

5357
```js

‎examples/next-js/globals.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.body {
2+
margin: 0 !important;
3+
padding: 0 !important;
4+
}
5+
.element {
6+
height:1000px;
7+
background-color: #ededed;
8+
font-size: 45px;
9+
border-top:1px solid #000;
10+
padding-top:55px;
11+
padding-left:10px;
12+
}
13+
14+
.element.no-padding{
15+
padding-top:0;
16+
}
17+
18+
.active {
19+
color:red !important;
20+
}

‎examples/next-js/page.tsx

Lines changed: 358 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,358 @@
1+
'use client'
2+
3+
import React from "react";
4+
import ReactDOM from "react-dom";
5+
6+
import {
7+
Link,
8+
DirectLink,
9+
Element,
10+
Events,
11+
animateScroll,
12+
scrollSpy,
13+
scroller
14+
} from "react-scroll";
15+
16+
const durationFn = function(deltaTop) {
17+
return deltaTop;
18+
};
19+
20+
const scrollToTop = () => {
21+
animateScroll.scrollToTop()
22+
}
23+
const scrollTo = (offset) => {
24+
scroller.scrollTo("scroll-to-element", {
25+
duration: 800,
26+
delay: 0,
27+
smooth: "easeInOutQuart",
28+
offset: offset
29+
});
30+
}
31+
const scrollToWithContainer= () =>{
32+
let goToContainer = new Promise((resolve, reject) => {
33+
Events.scrollEvent.register("end", () => {
34+
resolve(true);
35+
Events.scrollEvent.remove("end");
36+
});
37+
38+
scroller.scrollTo("scroll-container", {
39+
duration: 800,
40+
delay: 0,
41+
smooth: "easeInOutQuart"
42+
});
43+
});
44+
45+
goToContainer.then(() =>
46+
scroller.scrollTo("scroll-container-second-element", {
47+
duration: 800,
48+
delay: 0,
49+
smooth: "easeInOutQuart",
50+
containerId: "scroll-container",
51+
offset: 50
52+
})
53+
);
54+
}
55+
56+
export default function Home() {
57+
return (
58+
<div>
59+
<nav className="navbar navbar-default navbar-fixed-top">
60+
<div className="container-fluid">
61+
<div
62+
className="collapse navbar-collapse"
63+
id="bs-example-navbar-collapse-1"
64+
>
65+
<ul className="nav navbar-nav">
66+
<li>
67+
<Link
68+
activeClass="active"
69+
className="test1"
70+
to="test1"
71+
spy={true}
72+
smooth={true}
73+
duration={500}
74+
offset={50}
75+
>
76+
Test 1
77+
</Link>
78+
</li>
79+
<li>
80+
<Link
81+
activeClass="active"
82+
className="test2"
83+
to="test2"
84+
spy={true}
85+
smooth={true}
86+
duration={500}
87+
offset={-55}
88+
>
89+
Test 2
90+
</Link>
91+
</li>
92+
<li>
93+
<Link
94+
activeClass="active"
95+
className="test3"
96+
to="test3"
97+
spy={true}
98+
smooth={true}
99+
duration={500}
100+
>
101+
Test 3
102+
</Link>
103+
</li>
104+
<li>
105+
<Link
106+
activeClass="active"
107+
className="test4"
108+
to="test4"
109+
spy={true}
110+
smooth={true}
111+
duration={500}
112+
>
113+
Test 4
114+
</Link>
115+
</li>
116+
<li>
117+
<Link
118+
activeClass="active"
119+
className="test5"
120+
to="test5"
121+
spy={true}
122+
smooth={true}
123+
duration={500}
124+
delay={1000}
125+
>
126+
Test 5 ( delay )
127+
</Link>
128+
</li>
129+
<li>
130+
<Link
131+
activeClass="active"
132+
className="test6"
133+
to="anchor"
134+
spy={true}
135+
smooth={true}
136+
duration={500}
137+
>
138+
Test 6 (anchor)
139+
</Link>
140+
</li>
141+
<li>
142+
<Link
143+
activeClass="active"
144+
className="test7"
145+
to="test7"
146+
spy={true}
147+
smooth={true}
148+
duration={durationFn}
149+
>
150+
Test 7 (duration and container)
151+
</Link>
152+
</li>
153+
<li>
154+
{" "}
155+
<a onClick={() => animateScroll.scrollTo(100)}>
156+
Scroll To 100!
157+
</a>
158+
</li>
159+
<li>
160+
{" "}
161+
<a onClick={() => animateScroll.scrollToBottom()}>
162+
Scroll To Bottom
163+
</a>
164+
</li>
165+
<li>
166+
{" "}
167+
<a onClick={() => animateScroll.scrollMore(500)}>
168+
Scroll 500 More!
169+
</a>
170+
</li>
171+
<li>
172+
{" "}
173+
<a
174+
onClick={() =>
175+
animateScroll.scrollMore(1000, { delay: 1500 })
176+
}
177+
>
178+
Scroll 1000 More! ( delay ){" "}
179+
</a>
180+
</li>
181+
<li>
182+
<Link
183+
activeClass="active"
184+
className="test8"
185+
to="same"
186+
spy={true}
187+
smooth={true}
188+
duration={500}
189+
>
190+
Same target
191+
</Link>
192+
</li>
193+
<li>
194+
<Link
195+
activeClass="active"
196+
className="test9"
197+
to="same"
198+
spy={true}
199+
smooth={true}
200+
duration={500}
201+
>
202+
Same target
203+
</Link>
204+
</li>
205+
<li>
206+
<a
207+
className="test1"
208+
href="#test1"
209+
onClick={() => scrollTo()}
210+
>
211+
Scroll to element
212+
</a>
213+
</li>
214+
<li>
215+
<a
216+
className="test1"
217+
href="#test1"
218+
onClick={() => scrollTo(-50)}
219+
>
220+
Scroll to element (offset -50)
221+
</a>
222+
</li>
223+
<li>
224+
<a
225+
className="test1"
226+
href="#test1"
227+
onClick={() => scrollToWithContainer()}
228+
>
229+
Scroll to element within container
230+
</a>
231+
</li>
232+
</ul>
233+
</div>
234+
</div>
235+
</nav>
236+
237+
<div>
238+
<Element name="test1" className="element">
239+
test 1
240+
</Element>
241+
</div>
242+
243+
<Element name="test2" className="element no-padding">
244+
test 2
245+
</Element>
246+
247+
<Element name="test3" className="element">
248+
test 3
249+
</Element>
250+
251+
<Element name="test4" className="element">
252+
test 4
253+
</Element>
254+
255+
<Element name="test5" className="element">
256+
test 5
257+
</Element>
258+
259+
<div id="anchor" className="element">
260+
test 6 (anchor)
261+
</div>
262+
263+
<Link
264+
activeClass="active"
265+
to="firstInsideContainer"
266+
spy={true}
267+
smooth={true}
268+
duration={250}
269+
containerId="containerElement"
270+
style={{ display: "inline-block", margin: "20px" }}
271+
>
272+
Go to first element inside container
273+
</Link>
274+
275+
<Link
276+
activeClass="active"
277+
to="secondInsideContainer"
278+
spy={true}
279+
smooth={true}
280+
duration={250}
281+
containerId="containerElement"
282+
style={{ display: "inline-block", margin: "20px" }}
283+
>
284+
Go to second element inside container
285+
</Link>
286+
287+
<Element
288+
name="test7"
289+
className="element"
290+
id="containerElement"
291+
style={{
292+
position: "relative",
293+
height: "200px",
294+
overflow: "scroll",
295+
marginBottom: "100px"
296+
}}
297+
>
298+
<Element
299+
name="firstInsideContainer"
300+
style={{
301+
marginBottom: "200px"
302+
}}
303+
>
304+
first element inside container
305+
</Element>
306+
307+
<Element
308+
name="secondInsideContainer"
309+
style={{
310+
marginBottom: "200px"
311+
}}
312+
>
313+
second element inside container
314+
</Element>
315+
</Element>
316+
317+
<Element id="same" className="element">
318+
Two links point to this
319+
</Element>
320+
321+
<Element name="scroll-to-element" className="element">
322+
Scroll to element
323+
</Element>
324+
325+
<div
326+
className="element"
327+
id="scroll-container"
328+
style={{
329+
height: "200px",
330+
overflow: "scroll",
331+
marginBottom: "100px"
332+
}}
333+
>
334+
<form>
335+
<Element
336+
name="scroll-container-first-element"
337+
style={{
338+
marginBottom: "200px"
339+
}}
340+
>
341+
first element inside container
342+
</Element>
343+
344+
<div
345+
id="scroll-container-second-element"
346+
style={{
347+
marginBottom: "200px"
348+
}}
349+
>
350+
second element inside container
351+
</div>
352+
</form>
353+
</div>
354+
355+
<a onClick={scrollToTop}>To the top!</a>
356+
</div>
357+
)
358+
}

0 commit comments

Comments
 (0)