У меня есть веб-сайт (https://www.metis-online.com) с призывом к действию и ссылками на панель навигации в верхней части веб-сайта. Если вы нажмете на любую из ссылок, вы заметите, что она переходит на страницу, а не плавно прокручивает страницу. Не уверен, почему не удается плавно перейти к соответствующей ссылке привязки.
Мои ссылки привязки всегда имеют #. Например: https://www.metis-online.com/#courses https://www.metis-online.com/#services et c
head. php:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$('a[href^="/#"]').on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
header. php
<!-----NavigationBar---->
<section id="top">
</section>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<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">
<a class="nav-link" href="/../#top">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#courses">COURSES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#services">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
домой. php (это домашняя страница)
<html>
<head>
<?php include "./head.php" ?>
</head>
<body>
<?php include "./header.php" ?>
<!-------About------->
<section id="about">
...
</section>
<!-------Courses------->
<section id="courses">
...
<a href="courses/course-BRFAITC009">
<button type="button">Order online course and exam bundle</button>
</a>
...
</section>
<!-------Services------->
<section id="services">
...
</section>
<!-------Testimonials------->
<section id="testimonials">
...
</section>
<!-------Contacts------->
<section id="contacts">
...
</section>
...
</body>
</html>
CSS:
html, body {
max-width: 100%;
overflow-x: hidden;
}