如何为 类 添加平滑滚动?
How to add smooth scroll to classes?
我正在制作带有视差效果的网站,我想在它们之间添加平滑滚动。
我想要的:
当您点击“转到 css”时,它应该转到 parallax-2
,反之亦然
代码:
<!DOCTYPE html>
<html>
<head>
<title>Progress bar and nav bar</title>
<style>
h1 {
background-color: cyan;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #2A2A2A;
}
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* Avoiding overlay */
.main {
margin-top: 80px;
}
.header {
position: fixed;
top: 40px;
z-index: 1;
width: 100%;
background-color: #f1f1f1;
}
/* The progress container */
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
/* The progress bar */
.progress-bar {
height: 8px;
background: #04AA6D;
width: 0%;
}
.parallax-1{
width: 100%;
height: 800px;
background: url(
'https://th.bing.com/th/id/OIP.oPuMi8kcLgBVijTV0HVnTgHaFj?pid=ImgDet&rs=1');
background-size: 100% 100%;
background-attachment: fixed;
}
.parallax-1 h2 {
margin: auto;
position: relative;
left: 500x;
top: 300px;
width: 250px;
height: 45px;
padding: 10px;
background-color: black;
color: white;
text-align: center;
}
.parallax-2 {
width: 100%;
height: 600px;
background: url(
'https://th.bing.com/th/id/OIP.hfYeIbz7JfL-dqiMvYrICwHaEK?pid=ImgDet&rs=1');
background-size: 100% 100%;
background-attachment: fixed;
}
/* Styling the title of second parallax */
.parallax-2 h2 {
margin: auto;
position: relative;
left: 500x;
top: 300px;
width: 250px;
height: px;
padding: 10px;
background-color: black;
color: white;
text-align: center;
}
.para-1 {
padding: 50px;
background-color: #2A2A2A;
color: white;
font-size: 17px;
}
.para-2 {
padding: 50px;
background-color: #2A2A2A;
color: white;
font-size: 17px;
}
</style>
</head>
<body background-color="black">
<div class="navbar">
<a href="app.html">Home</a>
<a href="#news">Gallery</a>
<a href="#contact">About</a>
</div>
</div>
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="Bar"></div>
</div>
</div>
<div class="main">
<div class='parallax-1'>
<h2>HTML</h2>
</div>
<div class="para-1">
<p>a website made by me</p>
<a href="parallax-2">click to go to css</a> <!-- after clicking this, you should go to parallax 2-->
</div>
<div class='parallax-2'>
<h2>CSS</h2>
</div>
<div class="para-2">
<p>my website</p> <!-- after clicking this, you should go to parallax 1-->
</div>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
</div>
<script>
window.onscroll = function() {changeOnScroll()};
function changeOnScroll() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("Bar").style.width = scrolled + "%";
}
</script>
</body>
</html>
输出:
output
因此,如您所见,当我尝试单击“单击此处转到 css”时,
Cannot GET /parallax-2
错误来了。
我可以解决这个问题吗?这不适用于 类。 (我不是在问 Javascript,有没有办法只用 html 和 css 来做到这一点?)
谢谢!
您必须将 id
添加到您想要的 div 并将 href 更改为 href="#parallax-2"
window.onscroll = function() {
changeOnScroll()
};
function changeOnScroll() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("Bar").style.width = scrolled + "%";
}
h1 {
background-color: cyan;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #2A2A2A;
}
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* Avoiding overlay */
.main {
margin-top: 80px;
}
.header {
position: fixed;
top: 40px;
z-index: 1;
width: 100%;
background-color: #f1f1f1;
}
/* The progress container */
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
/* The progress bar */
.progress-bar {
height: 8px;
background: #04AA6D;
width: 0%;
}
.parallax-1 {
width: 100%;
height: 800px;
background: url('https://th.bing.com/th/id/OIP.oPuMi8kcLgBVijTV0HVnTgHaFj?pid=ImgDet&rs=1');
background-size: 100% 100%;
background-attachment: fixed;
}
.parallax-1 h2 {
margin: auto;
position: relative;
left: 500x;
top: 300px;
width: 250px;
height: 45px;
padding: 10px;
background-color: black;
color: white;
text-align: center;
}
.parallax-2 {
width: 100%;
height: 600px;
background: url('https://th.bing.com/th/id/OIP.hfYeIbz7JfL-dqiMvYrICwHaEK?pid=ImgDet&rs=1');
background-size: 100% 100%;
background-attachment: fixed;
}
/* Styling the title of second parallax */
.parallax-2 h2 {
margin: auto;
position: relative;
left: 500x;
top: 300px;
width: 250px;
height: px;
padding: 10px;
background-color: black;
color: white;
text-align: center;
}
.para-1 {
padding: 50px;
background-color: #2A2A2A;
color: white;
font-size: 17px;
}
.para-2 {
padding: 50px;
background-color: #2A2A2A;
color: white;
font-size: 17px;
}
<!DOCTYPE html>
<html>
<head>
<title>Progress bar and nav bar</title>
</head>
<body background-color="black">
<div class="navbar">
<a href="app.html">Home</a>
<a href="#news">Gallery</a>
<a href="#contact">About</a>
</div>
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="Bar"></div>
</div>
</div>
<div class="main">
<div class='parallax-1'>
<h2>HTML</h2>
</div>
<div class="para-1">
<p>a website made by me</p>
<a href="#parallax-2">click to go to css</a>
<!-- after clicking this, you should go to parallax 2-->
</div>
<div class='parallax-2' id="parallax-2">
<h2>CSS</h2>
</div>
<div class="para-2">
<p>my website</p>
<!-- after clicking this, you should go to parallax 1-->
</div>
<div id="news">
<h1>NEWS</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
</div>
</div>
</body>
</html>
我正在制作带有视差效果的网站,我想在它们之间添加平滑滚动。
我想要的:
当您点击“转到 css”时,它应该转到 parallax-2
,反之亦然
代码:
<!DOCTYPE html>
<html>
<head>
<title>Progress bar and nav bar</title>
<style>
h1 {
background-color: cyan;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #2A2A2A;
}
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* Avoiding overlay */
.main {
margin-top: 80px;
}
.header {
position: fixed;
top: 40px;
z-index: 1;
width: 100%;
background-color: #f1f1f1;
}
/* The progress container */
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
/* The progress bar */
.progress-bar {
height: 8px;
background: #04AA6D;
width: 0%;
}
.parallax-1{
width: 100%;
height: 800px;
background: url(
'https://th.bing.com/th/id/OIP.oPuMi8kcLgBVijTV0HVnTgHaFj?pid=ImgDet&rs=1');
background-size: 100% 100%;
background-attachment: fixed;
}
.parallax-1 h2 {
margin: auto;
position: relative;
left: 500x;
top: 300px;
width: 250px;
height: 45px;
padding: 10px;
background-color: black;
color: white;
text-align: center;
}
.parallax-2 {
width: 100%;
height: 600px;
background: url(
'https://th.bing.com/th/id/OIP.hfYeIbz7JfL-dqiMvYrICwHaEK?pid=ImgDet&rs=1');
background-size: 100% 100%;
background-attachment: fixed;
}
/* Styling the title of second parallax */
.parallax-2 h2 {
margin: auto;
position: relative;
left: 500x;
top: 300px;
width: 250px;
height: px;
padding: 10px;
background-color: black;
color: white;
text-align: center;
}
.para-1 {
padding: 50px;
background-color: #2A2A2A;
color: white;
font-size: 17px;
}
.para-2 {
padding: 50px;
background-color: #2A2A2A;
color: white;
font-size: 17px;
}
</style>
</head>
<body background-color="black">
<div class="navbar">
<a href="app.html">Home</a>
<a href="#news">Gallery</a>
<a href="#contact">About</a>
</div>
</div>
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="Bar"></div>
</div>
</div>
<div class="main">
<div class='parallax-1'>
<h2>HTML</h2>
</div>
<div class="para-1">
<p>a website made by me</p>
<a href="parallax-2">click to go to css</a> <!-- after clicking this, you should go to parallax 2-->
</div>
<div class='parallax-2'>
<h2>CSS</h2>
</div>
<div class="para-2">
<p>my website</p> <!-- after clicking this, you should go to parallax 1-->
</div>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
</div>
<script>
window.onscroll = function() {changeOnScroll()};
function changeOnScroll() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("Bar").style.width = scrolled + "%";
}
</script>
</body>
</html>
输出: output
因此,如您所见,当我尝试单击“单击此处转到 css”时,
Cannot GET /parallax-2
错误来了。
我可以解决这个问题吗?这不适用于 类。 (我不是在问 Javascript,有没有办法只用 html 和 css 来做到这一点?)
谢谢!
您必须将 id
添加到您想要的 div 并将 href 更改为 href="#parallax-2"
window.onscroll = function() {
changeOnScroll()
};
function changeOnScroll() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("Bar").style.width = scrolled + "%";
}
h1 {
background-color: cyan;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #2A2A2A;
}
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* Avoiding overlay */
.main {
margin-top: 80px;
}
.header {
position: fixed;
top: 40px;
z-index: 1;
width: 100%;
background-color: #f1f1f1;
}
/* The progress container */
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
/* The progress bar */
.progress-bar {
height: 8px;
background: #04AA6D;
width: 0%;
}
.parallax-1 {
width: 100%;
height: 800px;
background: url('https://th.bing.com/th/id/OIP.oPuMi8kcLgBVijTV0HVnTgHaFj?pid=ImgDet&rs=1');
background-size: 100% 100%;
background-attachment: fixed;
}
.parallax-1 h2 {
margin: auto;
position: relative;
left: 500x;
top: 300px;
width: 250px;
height: 45px;
padding: 10px;
background-color: black;
color: white;
text-align: center;
}
.parallax-2 {
width: 100%;
height: 600px;
background: url('https://th.bing.com/th/id/OIP.hfYeIbz7JfL-dqiMvYrICwHaEK?pid=ImgDet&rs=1');
background-size: 100% 100%;
background-attachment: fixed;
}
/* Styling the title of second parallax */
.parallax-2 h2 {
margin: auto;
position: relative;
left: 500x;
top: 300px;
width: 250px;
height: px;
padding: 10px;
background-color: black;
color: white;
text-align: center;
}
.para-1 {
padding: 50px;
background-color: #2A2A2A;
color: white;
font-size: 17px;
}
.para-2 {
padding: 50px;
background-color: #2A2A2A;
color: white;
font-size: 17px;
}
<!DOCTYPE html>
<html>
<head>
<title>Progress bar and nav bar</title>
</head>
<body background-color="black">
<div class="navbar">
<a href="app.html">Home</a>
<a href="#news">Gallery</a>
<a href="#contact">About</a>
</div>
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="Bar"></div>
</div>
</div>
<div class="main">
<div class='parallax-1'>
<h2>HTML</h2>
</div>
<div class="para-1">
<p>a website made by me</p>
<a href="#parallax-2">click to go to css</a>
<!-- after clicking this, you should go to parallax 2-->
</div>
<div class='parallax-2' id="parallax-2">
<h2>CSS</h2>
</div>
<div class="para-2">
<p>my website</p>
<!-- after clicking this, you should go to parallax 1-->
</div>
<div id="news">
<h1>NEWS</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
<h1>A website!!!</h1>
</div>
</div>
</body>
</html>