我刚刚在网站的右下角添加了一个按钮，允许用户返回页面顶部，但是当用户滚动时，它似乎取消了我的导航栏的隐藏。我整个上午都在看它，非常感谢您能以崭新的眼神看着它，任何帮助都将是非常棒的！
谢谢。
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navigation").style.top = "0";
} else {
document.getElementById("navigation").style.top = "-70px";
}
prevScrollpos = currentScrollPos;
}
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}nav {
z-index: 99;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 20px 60px;
text-align: center;
background-color: white;
font-size: 18px;
letter-spacing: 1px;
transition: top 0.3s;
border-bottom: #f1f1f1 2px solid;
}
nav a:first-child {
float: left;
}
.main-nav {
text-decoration: none;
display: inline-block;
float: right;
text-transform: uppercase;
color: #adb3c1;
padding: 1px 0;
margin: 0 10px;
transition: all 0.15s ease-in-out;
z-index: 10;
}
#navigation a:hover {
color: blue;
transition: 0.5s;
}
.fa-long-arrow-alt-up {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
border: none;
outline: none;
background: none;
color: black;
cursor: pointer;
padding: 15px;
font-size: 18px;
}
#myBtn:hover {
color: red;
}<!DOCTYPE html>
<html>
<head>
<title>Hector's Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/javascript.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="layout-portfolio">
<nav id="navigation">
<a data-scroll class="main-nav" class="nav-hover" href="#home">Home</a>
<a data-scroll class="main-nav" class="nav-hover" href="#contact">Contact</a>
<a data-scroll class="main-nav" class="nav-hover" href="#about">About</a>
<a data-scroll class="main-nav" class="nav-hover" href="#projects">Projects</a>
</nav>
<!-- Button to go to top -->
<button onclick="topFunction()" id="myBtn" class="fas fa-long-arrow-alt-up"></button>
</body>
</html>这里的问题是，第二次滚动将覆盖第一个。因此，您可以将代码移至单个功能。我更新了以下代码：
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navigation").style.top = "0";
} else {
document.getElementById("navigation").style.top = "-70px";
}
prevScrollpos = currentScrollPos;
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}nav {
z-index: 99;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 20px 60px;
text-align: center;
background-color: white;
font-size: 18px;
letter-spacing: 1px;
transition: top 0.3s;
border-bottom: #f1f1f1 2px solid;
}
nav a:first-child {
float: left;
}
.main-nav {
text-decoration: none;
display: inline-block;
float: right;
text-transform: uppercase;
color: #adb3c1;
padding: 1px 0;
margin: 0 10px;
transition: all 0.15s ease-in-out;
z-index: 10;
}
#navigation a:hover {
color: blue;
transition: 0.5s;
}
.fa-long-arrow-alt-up {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
border: none;
outline: none;
background: none;
color: black;
cursor: pointer;
padding: 15px;
font-size: 18px;
}
#myBtn:hover {
color: red;
}<!DOCTYPE html>
<html>
<head>
<title>Hector's Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/javascript.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="layout-portfolio">
<nav id="navigation">
<a data-scroll class="main-nav" class="nav-hover" href="#home">Home</a>
<a data-scroll class="main-nav" class="nav-hover" href="#contact">Contact</a>
<a data-scroll class="main-nav" class="nav-hover" href="#about">About</a>
<a data-scroll class="main-nav" class="nav-hover" href="#projects">Projects</a>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aperiam consectetur cupiditate deserunt dolore ducimus eius eos et ex explicabo fugit illo impedit inventore laudantium, maiores maxime minus quaerat, quasi rerum soluta tempore vel vitae? Ad, aliquid, consequatur deserunt distinctio expedita fuga labore modi perspiciatis quia ratione sequi sint soluta tempora, voluptates voluptatum. Aperiam consequuntur cumque delectus nulla odit placeat rem saepe sunt. Id labore magnam magni modi molestiae, neque possimus veniam? Blanditiis, commodi delectus dicta enim id incidunt modi nam quas saepe soluta. Aliquid, culpa, deserunt eveniet explicabo harum hic impedit maiores placeat qui quidem, quisquam reiciendis velit voluptatem? A atque consequatur, dolorum magni molestiae repudiandae saepe. Aliquid blanditiis debitis doloremque eum facere magni officiis similique soluta totam ullam! Aliquam amet aspernatur consectetur cumque ducimus et minima quis repellat repudiandae voluptate. Adipisci amet consectetur distinctio, error ex excepturi explicabo iure magnam neque obcaecati officiis quam quibusdam, vel, voluptas?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aperiam consectetur cupiditate deserunt dolore ducimus eius eos et ex explicabo fugit illo impedit inventore laudantium, maiores maxime minus quaerat, quasi rerum soluta tempore vel vitae? Ad, aliquid, consequatur deserunt distinctio expedita fuga labore modi perspiciatis quia ratione sequi sint soluta tempora, voluptates voluptatum. Aperiam consequuntur cumque delectus nulla odit placeat rem saepe sunt. Id labore magnam magni modi molestiae, neque possimus veniam? Blanditiis, commodi delectus dicta enim id incidunt modi nam quas saepe soluta. Aliquid, culpa, deserunt eveniet explicabo harum hic impedit maiores placeat qui quidem, quisquam reiciendis velit voluptatem? A atque consequatur, dolorum magni molestiae repudiandae saepe. Aliquid blanditiis debitis doloremque eum facere magni officiis similique soluta totam ullam! Aliquam amet aspernatur consectetur cumque ducimus et minima quis repellat repudiandae voluptate. Adipisci amet consectetur distinctio, error ex excepturi explicabo iure magnam neque obcaecati officiis quam quibusdam, vel, voluptas?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aperiam consectetur cupiditate deserunt dolore ducimus eius eos et ex explicabo fugit illo impedit inventore laudantium, maiores maxime minus quaerat, quasi rerum soluta tempore vel vitae? Ad, aliquid, consequatur deserunt distinctio expedita fuga labore modi perspiciatis quia ratione sequi sint soluta tempora, voluptates voluptatum. Aperiam consequuntur cumque delectus nulla odit placeat rem saepe sunt. Id labore magnam magni modi molestiae, neque possimus veniam? Blanditiis, commodi delectus dicta enim id incidunt modi nam quas saepe soluta. Aliquid, culpa, deserunt eveniet explicabo harum hic impedit maiores placeat qui quidem, quisquam reiciendis velit voluptatem? A atque consequatur, dolorum magni molestiae repudiandae saepe. Aliquid blanditiis debitis doloremque eum facere magni officiis similique soluta totam ullam! Aliquam amet aspernatur consectetur cumque ducimus et minima quis repellat repudiandae voluptate. Adipisci amet consectetur distinctio, error ex excepturi explicabo iure magnam neque obcaecati officiis quam quibusdam, vel, voluptas?</p>
<!-- Button to go to top -->
<button onclick="topFunction()" id="myBtn" class="fas fa-long-arrow-alt-up"></button>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句