-
Notifications
You must be signed in to change notification settings - Fork 438
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
384 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| .body { | ||
| margin: 0 !important; | ||
| padding: 0 !important; | ||
| } | ||
| .element { | ||
| height:1000px; | ||
| background-color: #ededed; | ||
| font-size: 45px; | ||
| border-top:1px solid #000; | ||
| padding-top:55px; | ||
| padding-left:10px; | ||
| } | ||
|
|
||
| .element.no-padding{ | ||
| padding-top:0; | ||
| } | ||
|
|
||
| .active { | ||
| color:red !important; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,358 @@ | ||
| 'use client' | ||
|
|
||
| import React from "react"; | ||
| import ReactDOM from "react-dom"; | ||
|
|
||
| import { | ||
| Link, | ||
| DirectLink, | ||
| Element, | ||
| Events, | ||
| animateScroll, | ||
| scrollSpy, | ||
| scroller | ||
| } from "react-scroll"; | ||
|
|
||
| const durationFn = function(deltaTop) { | ||
| return deltaTop; | ||
| }; | ||
|
|
||
| const scrollToTop = () => { | ||
| animateScroll.scrollToTop() | ||
| } | ||
| const scrollTo = (offset) => { | ||
| scroller.scrollTo("scroll-to-element", { | ||
| duration: 800, | ||
| delay: 0, | ||
| smooth: "easeInOutQuart", | ||
| offset: offset | ||
| }); | ||
| } | ||
| const scrollToWithContainer= () =>{ | ||
| let goToContainer = new Promise((resolve, reject) => { | ||
| Events.scrollEvent.register("end", () => { | ||
| resolve(true); | ||
| Events.scrollEvent.remove("end"); | ||
| }); | ||
|
|
||
| scroller.scrollTo("scroll-container", { | ||
| duration: 800, | ||
| delay: 0, | ||
| smooth: "easeInOutQuart" | ||
| }); | ||
| }); | ||
|
|
||
| goToContainer.then(() => | ||
| scroller.scrollTo("scroll-container-second-element", { | ||
| duration: 800, | ||
| delay: 0, | ||
| smooth: "easeInOutQuart", | ||
| containerId: "scroll-container", | ||
| offset: 50 | ||
| }) | ||
| ); | ||
| } | ||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <div> | ||
| <nav className="navbar navbar-default navbar-fixed-top"> | ||
| <div className="container-fluid"> | ||
| <div | ||
| className="collapse navbar-collapse" | ||
| id="bs-example-navbar-collapse-1" | ||
| > | ||
| <ul className="nav navbar-nav"> | ||
| <li> | ||
| <Link | ||
| activeClass="active" | ||
| className="test1" | ||
| to="test1" | ||
| spy={true} | ||
| smooth={true} | ||
| duration={500} | ||
| offset={50} | ||
| > | ||
| Test 1 | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link | ||
| activeClass="active" | ||
| className="test2" | ||
| to="test2" | ||
| spy={true} | ||
| smooth={true} | ||
| duration={500} | ||
| offset={-55} | ||
| > | ||
| Test 2 | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link | ||
| activeClass="active" | ||
| className="test3" | ||
| to="test3" | ||
| spy={true} | ||
| smooth={true} | ||
| duration={500} | ||
| > | ||
| Test 3 | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link | ||
| activeClass="active" | ||
| className="test4" | ||
| to="test4" | ||
| spy={true} | ||
| smooth={true} | ||
| duration={500} | ||
| > | ||
| Test 4 | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link | ||
| activeClass="active" | ||
| className="test5" | ||
| to="test5" | ||
| spy={true} | ||
| smooth={true} | ||
| duration={500} | ||
| delay={1000} | ||
| > | ||
| Test 5 ( delay ) | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link | ||
| activeClass="active" | ||
| className="test6" | ||
| to="anchor" | ||
| spy={true} | ||
| smooth={true} | ||
| duration={500} | ||
| > | ||
| Test 6 (anchor) | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link | ||
| activeClass="active" | ||
| className="test7" | ||
| to="test7" | ||
| spy={true} | ||
| smooth={true} | ||
| duration={durationFn} | ||
| > | ||
| Test 7 (duration and container) | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| {" "} | ||
| <a onClick={() => animateScroll.scrollTo(100)}> | ||
| Scroll To 100! | ||
| </a> | ||
| </li> | ||
| <li> | ||
| {" "} | ||
| <a onClick={() => animateScroll.scrollToBottom()}> | ||
| Scroll To Bottom | ||
| </a> | ||
| </li> | ||
| <li> | ||
| {" "} | ||
| <a onClick={() => animateScroll.scrollMore(500)}> | ||
| Scroll 500 More! | ||
| </a> | ||
| </li> | ||
| <li> | ||
| {" "} | ||
| <a | ||
| onClick={() => | ||
| animateScroll.scrollMore(1000, { delay: 1500 }) | ||
| } | ||
| > | ||
| Scroll 1000 More! ( delay ){" "} | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <Link | ||
| activeClass="active" | ||
| className="test8" | ||
| to="same" | ||
| spy={true} | ||
| smooth={true} | ||
| duration={500} | ||
| > | ||
| Same target | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link | ||
| activeClass="active" | ||
| className="test9" | ||
| to="same" | ||
| spy={true} | ||
| smooth={true} | ||
| duration={500} | ||
| > | ||
| Same target | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <a | ||
| className="test1" | ||
| href="#test1" | ||
| onClick={() => scrollTo()} | ||
| > | ||
| Scroll to element | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| className="test1" | ||
| href="#test1" | ||
| onClick={() => scrollTo(-50)} | ||
| > | ||
| Scroll to element (offset -50) | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| className="test1" | ||
| href="#test1" | ||
| onClick={() => scrollToWithContainer()} | ||
| > | ||
| Scroll to element within container | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <div> | ||
| <Element name="test1" className="element"> | ||
| test 1 | ||
| </Element> | ||
| </div> | ||
|
|
||
| <Element name="test2" className="element no-padding"> | ||
| test 2 | ||
| </Element> | ||
|
|
||
| <Element name="test3" className="element"> | ||
| test 3 | ||
| </Element> | ||
|
|
||
| <Element name="test4" className="element"> | ||
| test 4 | ||
| </Element> | ||
|
|
||
| <Element name="test5" className="element"> | ||
| test 5 | ||
| </Element> | ||
|
|
||
| <div id="anchor" className="element"> | ||
| test 6 (anchor) | ||
| </div> | ||
|
|
||
| <Link | ||
| activeClass="active" | ||
| to="firstInsideContainer" | ||
| spy={true} | ||
| smooth={true} | ||
| duration={250} | ||
| containerId="containerElement" | ||
| style={{ display: "inline-block", margin: "20px" }} | ||
| > | ||
| Go to first element inside container | ||
| </Link> | ||
|
|
||
| <Link | ||
| activeClass="active" | ||
| to="secondInsideContainer" | ||
| spy={true} | ||
| smooth={true} | ||
| duration={250} | ||
| containerId="containerElement" | ||
| style={{ display: "inline-block", margin: "20px" }} | ||
| > | ||
| Go to second element inside container | ||
| </Link> | ||
|
|
||
| <Element | ||
| name="test7" | ||
| className="element" | ||
| id="containerElement" | ||
| style={{ | ||
| position: "relative", | ||
| height: "200px", | ||
| overflow: "scroll", | ||
| marginBottom: "100px" | ||
| }} | ||
| > | ||
| <Element | ||
| name="firstInsideContainer" | ||
| style={{ | ||
| marginBottom: "200px" | ||
| }} | ||
| > | ||
| first element inside container | ||
| </Element> | ||
|
|
||
| <Element | ||
| name="secondInsideContainer" | ||
| style={{ | ||
| marginBottom: "200px" | ||
| }} | ||
| > | ||
| second element inside container | ||
| </Element> | ||
| </Element> | ||
|
|
||
| <Element id="same" className="element"> | ||
| Two links point to this | ||
| </Element> | ||
|
|
||
| <Element name="scroll-to-element" className="element"> | ||
| Scroll to element | ||
| </Element> | ||
|
|
||
| <div | ||
| className="element" | ||
| id="scroll-container" | ||
| style={{ | ||
| height: "200px", | ||
| overflow: "scroll", | ||
| marginBottom: "100px" | ||
| }} | ||
| > | ||
| <form> | ||
| <Element | ||
| name="scroll-container-first-element" | ||
| style={{ | ||
| marginBottom: "200px" | ||
| }} | ||
| > | ||
| first element inside container | ||
| </Element> | ||
|
|
||
| <div | ||
| id="scroll-container-second-element" | ||
| style={{ | ||
| marginBottom: "200px" | ||
| }} | ||
| > | ||
| second element inside container | ||
| </div> | ||
| </form> | ||
| </div> | ||
|
|
||
| <a onClick={scrollToTop}>To the top!</a> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.