Я создаю одностраничный тренажерный сайт и использую функцию прокрутки вниз на кнопках панели навигации до соответствующих разделов. Я также пытаюсь использовать его по ссылке в разделе «классы» на странице, чтобы прокрутить вниз до раздела контактов на странице. Тем не менее, когда после ввода кода js это приводит меня к началу страницы. ошибка, которую я получаю в консоли: не могу прочитать свойство 'addEventListener' с нулевым значением, но я не понимаю, как решить проблему из подобных проблем в stackoverflow. Ниже приведен код, и раздел, о котором я говорю, является первой карточкой в названии класса «spin», на которую ссылается «позвонить или написать по электронной почте, чтобы забронировать сейчас». Буду признателен за любую помощь:)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>FITT GYM</title>
</head>
<body>
<!--nav bar-->
<header>
<div class="logo-text">
<h1 class="logo-text"><span>FITT GYM</span></h1>
</div>
<i class="fa fa-bars menu-toggle"></i>
<ul class="nav">
<li> <a href="index.html">Home</a></li>
<li> <a href="#" class="about-button">About</a></li>
<li> <a href="#" class="classes-button">Classes</a></li>
<li> <a href="#" class="pt-button">PT</a></li>
<li> <a href="#" class="contact-button">Contact</a></li>
</ul>
</header>
<!--nav bar-->
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/woman-lifting-barbell-1552249.jpg" class="d-block w-100" alt="barbell">
</div>
<div class="carousel-item">
<img src="img/adult-athlete-body-bodybuilding-414029.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/photo-of-woman-jumping-on-box-2294403.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
<br>
<!--about-->
<div class="about-section">
<h2 class="about-header">About FITT GYM</h2>
<p class="about-para"><i>FITT Gym is a berkshire based gym designed to help individuals achieve their fittness goals.
Founded in 2014, FITT gym has been recognized as one of the top UK gym brands for it's high intensity workouts,
results driven personal trainers and for being one of the most socialable gyms to go to. With a state of the art facility
FITT gym makes your workout experince a comfortable one as well as endless equipment to train with.</i>
</p>
</div>
<br>
<div class="classes-section">
<h1 class="classes-header">Classes</h1>
<p class="classes-about"><i>The most popular reason why people become come to FITT gym is our classes! see what's on below:</i></p>
<body>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/athlete-bike-black-and-white-cycle-260409.jpg" alt="Card image cap">
<h4 class="card-title">Spin</h4>
<p class="card-text p-y-1" id="spin-card-text">The ride of your life to ensure you can ride mountains.</p>
<ul>
<li><a href="#" class=".contactBtn">Call or Email to Book Now</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/man-in-blue-shorts-carrying-brown-exercise-equipments-116079.jpg" alt="Card image cap">
<h4 class="card-title">Kettle Bells</h4>
<p class="card-text p-y-1">Russian style kettle bell workout to make you tougher than ever.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/there-women-in-a-yoga-session-917732.jpg" alt="Card image cap">
<h4 class="card-title">Yoga</h4>
<p class="card-text p-y-1">An experince that will clean your mind and keep you healthy.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/people-boxing-inside-gym-1862785.jpg" alt="Card image cap">
<h4 class="card-title">Boxing</h4>
<p class="card-text p-y-1">Fight your way through this tough workout with our experienced trainers.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/person-holding-barbell-841130.jpg" alt="Card image cap">
<h4 class="card-title">Crossfit</h4>
<p class="card-text p-y-1">Increase your power in our crossfit bootcamp and you'll be as strong as the hulk</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/man-working-out-2294361.jpg" alt="Card image cap">
<h4 class="card-title">Core Conditioning</h4>
<p class="card-text p-y-1">The core conditioning class will shake up your abs.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="pt-section">
<h2 class = "pt-header">Personal Training</h2>
<p class="pt-about"><i>If you feel you need a 1:1 personal training session, then our trainers here at FITT can offer sessions that a personally designed for your personal goals and needs.
Whether you want to build muscle, lose weight, or just feel better, we can help achieve that with our experienced trainers.
Click below to book a session:</i></p>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/action-active-adult-body-416754.jpg" alt="Card image cap">
<h4 class="card-title">1:1 Session</h4>
<p class="card-text p-y-1" id="spin-card-text">A serious workout that will direct you towards your goals. Prepare for intensity and achievement!</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<br>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/man-and-woman-holding-battle-ropes-1552242.jpg" alt="Card image cap">
<h4 class="card-title">2:1 Session</h4>
<p class="card-text p-y-1">A workout for you and a friend or family member to get FITT together. Achieveing goals together forms bonds that last forever! </p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/man-and-woman-doing-yoga-1882004.jpg" alt="Card image cap">
<h4 class="card-title">1:1 Meditation</h4>
<p class="card-text p-y-1">Learn to focus, clear thoughts and feel mentally stronger. Have a 1 to 1 session with a meditation master and reach enlightenment.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
</div>
</section>
<br>
<section class="contact-section">
<h1 class="contact-header">Contact</h1>
<footer class="footer-distributed">
<div class="footer-left">
<h3>FITT GYM</h3>
<p class="footer-links">
<a href="#" class="link-1">Home</a>
<a href="#">About</a>
<a href="#">Classes</a>
<a href="#">PT</a>
<a href="#">Contact</a>
</p>
<p class="footer-company-name">FITT Gym © 2020</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>Epic Road</span> Windsor, <br> Berkshire, <br> United Kingdom, <br> SL8 8QE</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>01344 865467677</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:support@company.com">info@fittgym.com</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About FITT Gym</span>
FITT Gym is a berkshire based gym designed to help individuals achieve their fittness goals.
</p>
<div class="footer-icons">
<a href="https://en-gb.facebook.com/FSAscot/"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/fsascot/?hl=en"><i class="fa fa-instagram"></i></a>
<a href="https://twitter.com/fsascot?lang=en"><i class="fa fa-twitter"></i></a>
</div>
</div>
</footer>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
* {
box-sizing: border-box;
list-style: none;
}
body {
padding: 0px;
margin: 0px;
height: 100%;
background-color: #0c0c0c;
font-family: 'Poppins', sans-serif;
min-height: 100vh;
}
#carouselExampleSlidesOnly{
z-index: -5;
}
#classes-heading{
text-align: center;
}
.grid-container {
display: grid;
}
.card-text {
color: #0c0c0c;
}
.btn-btn-primary {
align-items: center;
}
#classes-header {
color: white;
}
header{
background: #0c0c0c;
height: 66px;
}
header * {
color: white;
}
.header .logo {
float: left;
height: inherit;
margin-left: 7em;
}
header .logo-text {
margin: 8px;
}
header ul{
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
}
header ul li a {
display: block;
padding: 21px;
font-size: 1.1em;
text-decoration: none;
}
header ul li a:hover{
background: #3c3b3d83
}
header .menu-toggle{
display: none;
}
.page-wrapper{
min-height: 100%;
}
.about-header {
text-align: center;
color: white;
}
.about-para {
font-size: 1.3em;
color:white ;
text-align: center;
}
.classes-header {
text-align: center;
color:white ;
}
.classes-about {
font-size: 1.3em;
color:white ;
text-align: center;
}
.pt-header {
text-align: center;
color: white;
}
.pt-about {
font-size: 1.3em;
color: white;
text-align: center;
}
.footer-distributed{
background: #666;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 55px 50px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 40%;
}
/* The company logo */
.footer-distributed h3{
color: #ffffff;
margin: 0;
}
.footer-distributed h3 span{
color: rgb(31, 66, 163);
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
font-weight:400;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #222;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
font-weight:400;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: rgb(32, 59, 178);
text-decoration: none;;
}
.footer-distributed .footer-links a:before {
content: "|";
font-weight:300;
font-size: 20px;
left: 0;
color: #fff;
display: inline-block;
padding-right: 5px;
}
.footer-distributed .footer-links .link-1:before {
content: none;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
/* If you don't want the footer to be responsive, remove these media queries */
@media (max-width: 880px) {
.footer-distributed{
font: bold 14px sans-serif;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
}
.contact-header{
text-align: center;
color: white;
}
function smoothScroll(target,duration){
var target = document.querySelector(target);
var targetPosition = target.getBoundingClientRect().top;
var startPosition = window.pageYOffset;
var distance = targetPosition - startPosition;
var startTime = null;
function animation(currentTime){
if(startTime === null) startTime = currentTime;
var timeElapsed = currentTime - startTime;
var run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0,run);
if(timeElapsed < duration) requestAnimationFrame(animation);
console.log('timeElapsed : ' + timeElapsed + 'duration: ' + duration);
}
function ease(t, b, c, d) {
t /=d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t *(t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
var aboutBtn = document.querySelector('.about-button');
var aboutSection = document.querySelector('.about-section');
var classesBtn = document.querySelector('.classes-button');
var classesHeading = document.querySelector('.classes-header');
var ptBtn = document.querySelector('.pt-button');
var ptSection = document.querySelector('.pt-section');
var contactBtn = document.querySelector('.contact-button');
var contactSection = document.querySelector('.contact-section');
var cobBtn = document.querySelector('contactBtn');
aboutBtn.addEventListener('click', function(){
smoothScroll('.about-section', 1000);
});
aboutSection.addEventListener('click', function(){
smoothScroll('.about-button', 1000);
});
classesBtn.addEventListener('click', function(){
smoothScroll('.classes-header', 1000);
});
classesHeading.addEventListener('click', function(){
smoothScroll('.classes-button', 1000);
});
ptBtn.addEventListener('click', function(){
smoothScroll('.pt-section', 1000);
});
ptSection.addEventListener('click', function(){
smoothScroll('.pt-button', 1000);
});
contactBtn.addEventListener('click', function(){
smoothScroll('.contact-section', 1000);
});
contactSection.addEventListener('click', function(){
smoothScroll('.contact-button', 1000);
});
cobBtn.addEventListener('click', function(){
smoothScroll('.contact-section', 1000);
});