我想用fullpage.js做一个网站，我做了很多，但导航有一些问题。自从我第一次使用fullpage.js以来，我使用了自动滚动，这无疑让情况变得更糟。我在顶部做了一个导航栏，其中有几个导航按钮。如果我点击它，我想滚动到页面的一个部分，但常规的滚动到((；而其他的则不起作用。我还用fullpage.js给出了导航：true。我试着检查它自动滚动时会发生什么，我设法使主页部分的滚动工作，但如果我使用按钮从第二页滚动到第一页，如果我向下滚动，它就会转到第三页。有人对fullpage.js略知一二吗？
这是代码
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>以下是我对您的问题的看法。
如上所述，我纠正了第二页和第三页的滚动问题，并使导航栏按钮响应fullpage.js 的scrollTo功能
如果您不熟悉fullpage.js的属性访问这个
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>