<!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">
<title>home</title>
</head>
<body>
<div class="container">
<nav class="navbar fixed-top navbar-light bg-light mb-3 navbar-expand-sm mb-3 " id="main-nav">
<div class="container">
<a href="#" class="navbar-brand">Clickfix</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#home">Welcome</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="container">
<!--Home-->
<section>
<div id="home"></div>
<br>
<br>
<br>
<br>
<h2 class="h2 text-center">Home</h2>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
</p>
</section>
<!-- Pragarph-->
<section >
<div id="about"></div>
<br>
<br>
<br>
<br>
<h2 class="h2 text-center">About</h2>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus desert optio molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in
resembled by in
agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved. Not its herself forming
charmed amiable. Him why feebly expect future now. As absolute is by amounted repeated entirely ye returned. These ready timed
enjoy might sir yet one since. Years drift never if could forty being no. On estimable dependent as suffering on my. Rank it long
have sure in room what as he. Possession travelling sufficient yet our. Talked vanity looked in to. Gay perceive led believed
endeavor. Rapturous no of estimable oh, therefore, direction up. Sons the ever not fine like eyes all sure.
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
</p>
</section>
<!-- Pragarph-->
<section>
<div id="contact"></div>
<br>
<br>
<br>
<br>
<h2 class="h2 text-center ">Contact</h2>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
</p>
</section>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="h
<!-- begin snippet: js hide: false console: true babel: false -->
共1个答案
匿名用户
您忘记包含引导js文件,
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
请查看以下代码,
null
$('body').scrollspy({
target: '#main-nav'
});
$('#main-nav a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
//Animate Smooth Scroll
$(' html , body').animate({
scrollTop: $(hash).offset().top
}, 900, function() {
window.location.hash = hash;
});
}
});
<!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">
<title>home</title>
</head>
<body>
<div class="container">
<nav class="navbar fixed-top navbar-light bg-light mb-3 navbar-expand-sm mb-3 " id="main-nav">
<div class="container">
<a href="#" class="navbar-brand">Clickfix</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#home">Welcome</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="container">
<!--Home-->
<section>
<div id="home"></div>
<br>
<br>
<br>
<br>
<h2 class="h2 text-center">Home</h2>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
</p>
</section>
<!-- Pragarph-->
<section>
<div id="about"></div>
<br>
<br>
<br>
<br>
<h2 class="h2 text-center">About</h2>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus desert optio molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in
resembled by in
agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved. Not its herself forming
charmed amiable. Him why feebly expect future now. As absolute is by amounted repeated entirely ye returned. These ready timed
enjoy might sir yet one since. Years drift never if could forty being no. On estimable dependent as suffering on my. Rank it long
have sure in room what as he. Possession travelling sufficient yet our. Talked vanity looked in to. Gay perceive led believed
endeavor. Rapturous no of estimable oh, therefore, direction up. Sons the ever not fine like eyes all sure.
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
</p>
</section>
<!-- Pragarph-->
<section>
<div id="contact"></div>
<br>
<br>
<br>
<br>
<h2 class="h2 text-center ">Contact</h2>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
</p>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
</body>
</html>
