我正在尝试使用来自my Codepen的Javascript在this example page的按钮上创建平滑的滚动效果，并且它仍然会＃34;快照＆＃34;到页面的部分，而不是平滑地滚动到该部分。
是什么导致这不起作用？ （尝试添加休息时间，看看我是否因为滚动速度而变得疯狂。）
以下代码：
HTML
<button onclick="topFunction()" id="topBtn" title="Go to top">Top</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header-row">
<div class="header-left">
<h4>A Self-Taught Programmer's Adventure</h4>
<h3>Victor Rojas</h3>
</div>
<div class="header-center">
<img class="logo-main" src="https://victoryroads.files.wordpress.com/2017/05/cropped-artboard-1.png" title="Victory Roads">
</div>
<div class="header-right">
<h4 class="text-social">Connect with me:</h4>
<a href="https://www.facebook.com/spikefrs/" class="fa fa-facebook" target="_blank">
</a>
<a href="https://www.instagram.com/spikefrs/" class="fa fa-instagram">
</a>
<a href="https://www.linkedin.com/in/victorvanrojas/" class="fa fa-linkedin">
</a>
</div>
</div>
<div class="header-right-nav" id="topnav">
<a href="#portfolio">Portfolio</a>
<a href="#accomplishments">Accomplishments</a>
<a class="active" href="#home">Home</a>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="main-body">
<p class="header-title" id="accomplishments">Accomplishments</p>
<div class="row">
<div class="column">
<p class="subheader-title">Projects</p>
<ul>
<p class="project"><a class ="link" href="https://codepen.io/c0nnexi0n/full/oGrowR/">Tribute Page</a></p><br>
<p class="project"><a class ="link" href="https://victoryroads.club/">Personal Blog</a></p>
</ul>
</div>
<div class="column">
<p class="subheader-title">Certificates</p>
<ul>
<p class="project"><a class ="link" href="https://www.coursera.org/account/accomplishments/certificate/8FGMKKQ5VN">Python Certification</a></p><br>
<p class="project"><a class ="link" href="https://www.udemy.com/certificate/UC-MVB4P9MJ/">Marketo Certification</a></p>
</ul>
</div>
</div>
<div class="row">
<p class="header-title" id="portfolio">My Portfolio</p>
<img class="port1" src="https://i.imgur.com/6aLPprT.png"></img>
<img class="port2" src="https://i.imgur.com/A8tOXw3.png"></img>
</div>
</div>
CSS
$black: #000;
$grey: #868686;
$white: #FFF;
$red: #dd4b4b;
.header-row{
position: relative;
background-color: $grey;
width: 100%;
height: 150px;
padding: 40px;
}
.header-left{
position: relative;
overflow: auto;
}
.header-center{
position: relative;
text-align: center;
height: 60px;
top: -70px;
}
.header-right{
position: relative;
text-align: right;
top: -145px;
}
.text-social{
position: relative;
left: -125px;
top: 30px;
text-decoration: underline;
}
.fa {
font-size: 30px;
width: 30px;
text-align: right;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
color: $black;
}
.fa:hover{
opacity: 20%;
color: $red;
text-decoration: none;
text-shadow: 1px 2px 3px $black;
}
.header-title{
text-align: center;
padding: 20px;
color: $white;
font-weight: 500;
font-size: 40px;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.subheader-title{
text-align: center;
padding: 20px;
color: $white;
font-weight: 500;
font-size: 30px;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.logo-main{
height: 60px;
top: -200px;
}
.header-right-nav {
background-color: #333;
overflow: hidden;
}
.header-right-nav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: arial, san-serif;
}
.header-right-nav a:hover {
background-color: #ddd;
color: black;
}
.header-right-nav a.active {
background-color: $red;
color: white;
}
.main-body {
position: relative;
background-color: $grey;
color: $black;
width: auto;
height: 100%;
}
.row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
text-align: center;
}
.column {
position: relative;
display: table-cell;
background-color: $red;
height: 20vh;
column-count: 1;
column-gap: 2em;
left: 15px;
border-radius: 25px;
}
.project {
position: relative;
left: -20px;
font-size: 25px;
}
.link {
color: $white;
}
.link:hover {
color: $black;
text-decoration: underline;
}
.port1{
position: relative;
height: 300px;
width: 600px;
margin: 28px;
}
.port2{
position: relative;
height: 300px;
width: 600px;
}
#topBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#topBtn:hover {
background-color: #555;
}
的Javascript
document.getElementsByTagName("h1")[0].style.fontSize = "80px";
document.getElementsByTagName("h3")[0].style.fontSize = "25px";
document.getElementsByTagName("h4")[0].style.fontSize = "15px";
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});