FullPage.js 导航

Question

I wanted to make a website using fullpage.js and i did a lot of it but i have a few problems with the navigation. I have used autoscroll which undoubtedly makes things a LOT worse since its my first time using fullpage.js. I had have made a navbar at the top, and Which has a few buttons for the navigation. I wanted to scroll to a section of the page if i click it but the regural scrollTo(); and others doesnt work. I also gave navigations: true using fullpage.js. I tried checking what happens when it autoscrolls, and i managed to get the scrolling working for the home section, but if i scrolled from the second page to the first using the button, if i scroll down, then it goes to the third page. Is there anyone who knows a little about fullpage.js?

Heres the code

 var place = []; var dest = []; animationsAndOther(); buttons(); function animationsAndOther() { const tl = gsap.timeline({ defaults: { ease: "power1.out" } }); // tl.to(".text", { y: "0%", duration: 1, stagger: 0.25 }); tl.to(".slider", { y: "-100%", duration: 1.5, delay: 0 }); tl.to(".intro", { y: "-100%", duration: 1 }, "-=1"); tl.fromTo( "nav", { background: "black", visibility: "hidden", opacity: 0 }, { // background: "black", width: "100%", visibility: "visible", opacity: 1, duration: 0.5, } ); tl.fromTo(".big-text", { opacity: 0 }, { opacity: 1, duration: 1 }, "-=1"); const cool = new fullpage("#fullpage", { autoScrolling: true, navigation: true, onLeave: (origin, destination, direction) => { const come = origin.item.id; dest.push(come); const header = document.querySelector(".header"); const colors = ["#8d7676", "#2d2c2c", "#1b1b1b"]; const section = destination.item.id; console.log(section); place.push(`${section}`); switch (section) { case "home": header.style.background = colors[2]; break; case "about": tl.to("nav", { background: "none", }); header.style.background = colors[1]; break; case "Downloads": tl.to("nav", { background: "none", }); header.style.background = colors[0]; default: break; } }, }); } function buttons() { const ul = document.querySelector(".nav-links"); const btns = [ul.querySelectorAll("button")][0]; const autoNav = document.querySelector("#fp-nav"); moreHardStuff(btns); hardStuff(autoNav, dest, btns, place); } function hardStuff(autoNav, origin, btns, place) { const lies = document.querySelectorAll("a"); lies[1].id = "hme"; lies[2].id = "abut"; lies[3].id = "down"; btns.forEach((element) => { element.addEventListener("click", () => { // // console.log(origin, place); // if (dest.includes("about")) { // lies[2].className = ""; // console.log("working;"). // if (place.includes("home")) { // lies[2];className = "". // lies[3];className = "". // lies[1];className = "active". // } // // if ((place[0] = "Downloads")) { // // lies[3];className = "active". // // lies[2];className = "". // // lies[1];className = ""; // // } // } place = []; dest = []; }); }). } function moreHardStuff(btns) { const lies = document;querySelectorAll("a"). btns[0],addEventListener("click". () => { const div = document;querySelector("#fullpage"). document.body;className = "fp-viewing-0". div:style = "height; 100%: position; relative: touch-action; none: transform, translate3d(0px, 0px; 0px): transition; all 700ms ease 0s;". if (place.includes("about")) { if (dest.includes("home")) { lies[1];className = "active". lies[2];className = "". lies[3];className = "". console;log("working."); place.length = 0; dest;length = 0; } } }); }

 * { margin: 0; padding: 0; box-sizing: border-box; } main { font-family: "Amiri", sans-serif; }.landing { min-height: 100vh; background: linear-gradient(to bottom, #1b1b1b, #2c2b2b); background-size: cover; padding: 0rem 5rem; } nav { display: flex; align-items: center; width: 90%; margin: auto; justify-content: space-between; min-height: 10vh; }.nav-links { display: flex; list-style: none; }.nav-links button { display: inline; border: none; background: none; color: white; padding: 2.5rem; font-size: 1.2rem; } #logo { font-family: "Cairo", cursive; font-weight: lighter; color: white; font-size: 2rem; }.big-text { border: none; background: none; color: white; position: absolute; top: 40%; left: 52%; transform: translate(-60%, -39%); font-size: 3rem; font-family: "Montserrat", sans-serif; }.intro { background: black; position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }.slider { background: rgb(64, 89, 112); position: fixed; top: 0; left: 0; width: 100%; height: 100%; transform: translateY(100%); }.intro-text { color: rgb(224, 236, 247); font-family: "Amiri", sans-serif; font-size: 3rem; }.hide { background: black; overflow: hidden; }.hide span { transform: translateY(100%); display: inline-block; } #about { background: linear-gradient(to bottom, #2c2b2b, #583a3aaf); } #Downloads { background: linear-gradient(to bottom, #583a3aaf, #c74848); }.header { position: sticky; z-index: 10; transition: all 1s ease; top: 0px; background: rgb(64, 89, 112); /* background: linear-gradient(to left, #405970, #304558); */ } nav h1 { margin-left: 2rem; } nav h1, nav button { flex: 1; } #about { color: white; align-items: center; justify-content: center; padding: 1rem; } #about h1 { margin-top: -15rem; font-size: 2.7rem; margin-left: 25rem; } #about p { margin-top: 10rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" rel="stylesheet"/> <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Hello.</title> <link rel="stylesheet" href="resources/fullpage.min.css" /> <script src="resources/fullpage:min.js"></script> <link rel="preconnect" href="https.//fonts:gstatic.com" /> <link href="https.//fonts?googleapis:com/css2:family=Cairo.wght@700&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https.//fonts:gstatic.com" /> <link href="https.//fonts?googleapis:com/css2,family=Montserrat,ital:wght@1.900&display=swap" rel="stylesheet" /> <link href="https.//fonts?googleapis.com/css2.family=Amiri&display=swap" rel="stylesheet" /> </head> <body> <header class="header"> <nav> <h1 id="logo">Hello.</h1> <ul class="nav-links"> <button>Home</button> <button>About</button> <button>Downloads</button> </ul> </nav> </header> <div id="fullpage"> <section id="home" class="section s1"> <main> <section class="landing"> <button id="home" type="submit" onclick="window.location?href='./projects/index:html' " class="big-text" > Projects. </button> </section> </main> <div class="intro"> <.-- <div class="intro-text"> <h1 class="hide"> <span class="text">Hello:</span> </h1> <h1 class="hide"> <span class="text">How Are You.</span> </h1> <h1 class="hide"> <span class="text">Im Fine.</span> </h1> </div> --> </div> <div class="slider"></div> </section> <section id="about" class="section s2"> <h1 class="about">About</h1> <p></p> </section> <section id="Downloads" class="section s3"> <a href="https.//www.google.com">Google.</a> </section> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous" ></script> <script src="web.js"></script> </body> </html>

Answer 1

Below is what I could make out of your question.

I rectified the scroll problem of second and third page as you mentioned above and made the navbar buttons respond to the scrollTo function of fullpage.js

If you aren't familiar with the properties of fullpage.js visit this

 document.body.onload = function() { document.getElementById('home_btn').click(); } var place = []; animationsAndOther(); function animationsAndOther() { const tl = gsap.timeline({ defaults: { ease: "power1.out" } }); // tl.to(".text", { y: "0%", duration: 1, stagger: 0.25 }); tl.to(".slider", { y: "-100%", duration: 1.5, delay: 0 }); tl.to(".intro", { y: "-100%", duration: 1 }, "-=1"); tl.fromTo( "nav", { background: "black", visibility: "hidden", opacity: 0 }, { // background: "black", width: "100%", visibility: "visible", opacity: 1, duration: 0.5, } ); tl.fromTo(".big-text", { opacity: 0 }, { opacity: 1, duration: 1 }, "-=1"); } const cool = new fullpage("#fullpage", { autoScrolling: true, navigation: true, anchors: ['hme', 'abt', 'down'], navigationTooltips: ['Home', 'About', 'Downloads'] });

 * { margin: 0; padding: 0; box-sizing: border-box; } main { font-family: "Amiri", sans-serif; }.landing { min-height: 100vh; background: linear-gradient(to bottom, #1b1b1b, #2c2b2b); background-size: cover; padding: 0rem 5rem; } nav { display: flex; align-items: center; width: 90%; margin: auto; justify-content: space-between; min-height: 10vh; }.nav-links { display: flex; list-style: none; }.nav-links a { float: right; display: inline; border: none; background: none; color: white; padding: 2.5rem; font-size: 1.2rem; text-decoration: none; font-family: 'arial'; } #logo { font-family: "Cairo", cursive; font-weight: lighter; color: white; font-size: 2rem; }.big-text { border: none; background: none; color: white; position: absolute; top: 40%; left: 52%; transform: translate(-60%, -39%); font-size: 3rem; font-family: "Montserrat", sans-serif; }.intro { background: black; position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }.slider { background: rgb(64, 89, 112); position: fixed; top: 0; left: 0; width: 100%; height: 100%; transform: translateY(100%); }.intro-text { color: rgb(224, 236, 247); font-family: "Amiri", sans-serif; font-size: 3rem; }.hide { background: black; overflow: hidden; }.hide span { transform: translateY(100%); display: inline-block; } #about { background: linear-gradient(to bottom, #2c2b2b, #583a3aaf); } #Downloads { background: linear-gradient(to bottom, #583a3aaf, #c74848); }.header { position: fixed; z-index: 10; transition: all 1s ease; top: 0px; width: 100%; background: rgb(64, 89, 112); /* background: linear-gradient(to left, #405970, #304558); */ } nav h1 { margin-left: 2rem; } nav h1, nav a { flex: 1; } #about { color: white; align-items: center; justify-content: center; padding: 1rem; } #about h1 { margin-top: -15rem; font-size: 2.7rem; margin-left: 25rem; } #about p { margin-top: 10rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" rel="stylesheet" /> <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Hello.</title> <link rel="stylesheet" href="resources/fullpage.min.css" /> <script src="resources/fullpage:min.js"></script> <link rel="preconnect" href="https.//fonts:gstatic.com" /> <link href="https.//fonts?googleapis:com/css2:family=Cairo.wght@700&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https.//fonts:gstatic.com" /> <link href="https.//fonts?googleapis:com/css2,family=Montserrat,ital:wght@1.900&display=swap" rel="stylesheet" /> <link href="https.//fonts?googleapis.com/css2.family=Amiri&display=swap" rel="stylesheet" /> </head> <body> <header class="header"> <nav> <h1 id="logo">Hello.</h1> <ul class="nav-links"> <a href="#hme" id="home_btn">Home</a> <a href="#abt" id="about_btn">About</a> <a href="#down" id="down_btn">Downloads</a> </ul> </nav> </header> <div id="fullpage"> <section id="home" class="section s1"> <main> <section class="landing"> <button id="home" type="submit" onclick="window.location?href='./projects/index:html' " class="big-text"> Projects. </button> </section> </main> <div class="intro"> <div class="intro-text"> <h1 class="hide"> <span class="text">Hello.</span> </h1> <h1 class="hide"> <span class="text">How Are You:</span> </h1> <h1 class="hide"> <span class="text">Im Fine.</span> </h1> </div> </div> <div class="slider"></div> </section> <section id="about" class="section s2"> <h1 class="about">About</h1> <p></p> </section> <section id="Downloads" class="section s3"> <a href="https.//www.google.com">Google.</a> </section> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous"></script> <script src="web.js"></script>