有人可以看看我的HTML吗？以前，我的scrollspy工作，但我不知道发生了什么，它不再工作。我已经在这里工作了2个小时，但仍然无法让它工作。我不记得做任何重大改变。
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nate The Great</title>
<link href="https://fonts.googleapis.com/css?family=Bungee|Istok+Web|Lora" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/main.css">
<link rel='shortcut icon' type='image/x-icon' href='./assets/img/favicon.ico' />
</head>
<body data-spy="scroll" data-target="#navbar" >
<!--Start of Navigation Bar-->
<div class="navbar transparent pull-right navbar-fixed-top" id="navigation">
<div class="container-fluid">
<p class="navbar-brand " id="brand"> <img src="./assets/img/profile.jpg" alt="" style="display: inline; margin-right: 3px; border-radius:50%">Nathaniel D Alcedo Jr</p>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#portfolio">Projects</a></li>
<li><a href="#about">About</a></li>
<!--<li><a href="https://ndaljr.github.io/blog">Blog</a></li> will workk on this-->
</ul>
</div>
</div>
</div>
<!--End of Navigation Bar-->
<!--Landing Page-->
<div id='home'>
<h1>
Nathaniel D Alcedo Jr,
</h1>
<h2 >aspiring web developer</h2>
</div>
<!--End of Landing Page-->
<div class="text-center" id="portfolio">
<h1>Projects Finished</h1>
<p>Free Code Camp <a href="./calculator"><u>Calculator</u></a></p>
</div>
<div class="pull-left" id="about">
<h1>A little about me</h1>
<p>
Hello there! As the title suggests, I am an aspiring web developer.
I'm currently serving my time in the Singapore Armed Forces and in my free time, I like to muck
around on the computer. It ranges from making mock websites to thinking of my own implementations
of basic data structures. I find pleasure in breaking code and trying to fix them using stackoverflow.<br><br>
My first contact with a programming languges was in polytechnic during a module on c++. How I sucked terriby!
It wasn't until halfway through my time in national service did I take an interest in programming once again. I'm currently
doing Free Code Camp's course on web development in my free time. I turn operationally ready in may of 2017 and I intend to
look for a job in this wonderful field we call software development.
</p>
</div>
<!--Start ofFooter Bar-->
<!--
<footer class="footer pull-left navbar-fixed-bottom"> TODO: PLACE THIS AT THE BOTTOM OF THE TOTAL PAGE
<div class="container">
<div class="row">
<div class="col-sm-2">
<p>Copyright © Nathaniel</p>
</div>
</div>
</div>
</footer>-->
<!--End of Footer Bar-->
<script src="./assets/js/jquery-3.1.1.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/c1a4d3ec73.js"></script>
<script>
// This script enalbes the smooth scrolling of pages when clicking links on the Navbar
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
答案 0 :(得分：0)
您需要将.navbar-default课程应用于导航栏，并更改id="navigation"的 ID ，以反映data-target，目前它是＆＃39; s data-target="#navbar"。
**目前还没有足够的内容实际滚动，因此为了示例目的设置了通用高度。
工作示例： 打开FullPage
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});.navbar.navbar-default {
background-color: transparent;
border: 0;
}
.navbar.navbar-default .navbar-brand span,
.navbar.navbar-default .navbar-brand img {
display: inline-block;
}
section {
padding-top: 70px;
min-height: 750px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body data-spy="scroll" data-target="#navbar">
<div class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img src="http://placehold.it/20x20/000" alt=""> <span>Nathaniel D Alcedo Jr</span>
</a>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a>
</li>
<li><a href="#portfolio">Projects</a>
</li>
<li><a href="#about">About</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<section id='home'>
<h1>Nathaniel D Alcedo Jr,</h1>
<h2>aspiring web developer</h2>
</section>
<section class="text-center" id="portfolio">
<h1>Projects Finished</h1>
<p>Free Code Camp <a href="./calculator"><u>Calculator</u></a>
</p>
</section>
<section id="about">
<h1>A little about me</h1>
<p>
Hello there! As the title suggests, I am an aspiring web developer. I'm currently serving my time in the Singapore Armed Forces and in my free time, I like to muck around on the computer. It ranges from making mock websites to thinking of my own implementations
of basic data structures. I find pleasure in breaking code and trying to fix them using stackoverflow.
<br>
<br>My first contact with a programming languges was in polytechnic during a module on c++. How I sucked terriby! It wasn't until halfway through my time in national service did I take an interest in programming once again. I'm currently doing Free
Code Camp's course on web development in my free time. I turn operationally ready in may of 2017 and I intend to look for a job in this wonderful field we call software development.
</p>
</section>
</div>
<footer class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
TODO: PLACE THIS AT THE BOTTOM OF THE TOTAL PAGE
</div>
<div class="col-sm-3">
<p>Copyright © Nathaniel</p>
</div>
<div class="col-sm-3">
<p>Trademark ® Nathaniel</p>
</div>
<div class="col-sm-3">
<p>Something Nathaniel</p>
</div>
<div class="col-sm-3">
<p>Something Nathaniel</p>
</div>
</div>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>