Я соединил некоторые основные функции веб-сайта, применив jquery на тестовой странице, и в него входит плавная прокрутка, назначение активного класса выделенному разделу при прокрутке веб-страницы вверх и вниз, уменьшение панели навигации и возврат к верхней кнопке.Однако я понял, что все эти функции перестали работать после того, как я добавил «вернуться к началу», поскольку он может работать только один раз, после чего все перестало работать, и веб-сайт просто «сдох» и даже не может прокрутиться вниз.Я выполнил некоторую повторную проверку и исправил свой код, не используя «.click ()» в одиночку, применив «.on (event, func)», поскольку кто-то испытал то же самое, что и я, но все равно не помогает.Может кто-нибудь взглянуть на мой код, и, пожалуйста, дайте мне знать, что еще я должен изменить его, чтобы он работал правильно.Спасибо
$(document).ready(function() {
var scrollLink = $('.scroll');
// smooth scrolling feature
scrollLink.on('click',function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 900)
})
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
var btn = $('.upBtn');
// shrink the navbar once scrollbar moves down more than 50px
if($('.navbar').offset().top > 50) {
$('.navbar').addClass('navbar-shrink');
} else {
$('.navbar').removeClass('navbar-shrink');
}
// show users which section they are looking at by applying active class to each nav link
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 55;
if(sectionOffset <= scrollbarLocation) {
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active')
}
})
// show the go up bottom in the right bottom cornor once scroll bar moves down more then 100px
if($(window).scrollTop() > 100) {
btn.addClass('show');
} else {
btn.removeClass('show')
}
// scrolling back up to the top once btn being clicked
// I have changed my code to '.on' after done some reseatch but the button still not working once being clicked and working once.
btn.on('click',function(e) {
e.preventDefault();
$('html, body').animate({scrollTop: 0}, 900)
})
})
})
section {
width: 100%;
height: 900px;
}
#home {
background-color: lightblue;
}
#about {
background-color: lightsalmon;
}
#contact {
background-color: lightpink;
}
.active {
background-color: blue !important;
}
.navbar {
transition: all .4s ease-in 0s;
}
.navbar-shrink {
padding-top: .2rem;
padding-bottom: .2rem;
transition: all .4s ease-in 0s;
background: transparent !important;
}
.upBtn {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, .2);
opacity: 0;
visibility: hidden;
}
.show {
opacity: 1;
visibility: visible;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>jQuery Smooth Scrolling</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link scroll" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<section id='home'></section>
<section id='about'></section>
<section id='contact'></section>
<a href="#" class="upBtn">Up</a>
<!-- jQuery cdn has to be full version not slim as slim version dosen't include the animation features-->
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src='main.js'></script>
</body>
</html>