我有一个问题，让我的锚点平滑滚动到目标文本。我已尝试在这里使用其他已回答问题的jQuery，但由于某些奇怪的原因，它根本不起作用。
ScrollSpy也没有运气。我正在使用W3Schools的这个example ScrollSpy SmoothScrolling。
这是我的标记：
<!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-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="tbd.css">
<link rel="stylesheet" type="text/css" href="css/hover-min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Poppins" rel="stylesheet">
</head>
<body class="pattern-svg-background">
<div class="col-xl-1-12|auto">
<div id="top" class="jumbotron">
<h1 class="display-3">Hello there,buddy!</h1>
<p class="lead">It is time to choose a browser but there are so many great choices that you get confused on what to pick! </p>
<hr class="m-y-md">
<p>This is where I come in! I'm going to explain the pros and cons of most popular(and less popular) browsers. Pick your browser in the menu below!</p>
<p class="lead">
<nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav text-md-center nav-justified w-100">
<li class="nav-item">
<a class="nav-link" href="#chrome"><i class="fa fa-chrome fa-fw" aria-hidden="true"></i>Google Chrome<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#opera"><i class="fa fa-opera fa-fw" aria-hidden="true"></i>Opera</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#safari"><i class="fa fa-safari fa-fw" aria-hidden="true"></i>Safari</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#firefox"><i class="fa fa-firefox fa-fw" aria-hidden="true"></i>Firefox</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#edge"><i class="fa fa-edge fa-fw" aria-hidden="true"></i>Edge</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Other browsers</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#other">Vivaldi</a>
<a class="dropdown-item" href="#other">Midori</a>
<a class="dropdown-item" href="#other">Pale Moon</a>
</div>
</li>
</ul>
</div>
</nav>
</p>
</div>
</div>
<div class="bg-browser-info-text container-fluid">
<div class="row">
<div class="col-12">
<h2 id="chrome">Google Chrome</h2>
<p class="browser-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula neque. Phasellus consequat risus sed magna hendrerit venenatis. Nulla maximus magna eu velit vestibulum, at aliquet arcu dictum. Nam efficitur luctus dictum. Aenean
ex ipsum, iaculis sed venenatis ut, blandit vel augue. Donec vehicula, lorem tristique consectetur porttitor, risus mauris euismod est, ut gravida arcu lacus sodales ligula. Maecenas sed tempus ipsum. Mauris in augue sit amet mauris feugiat
semper. Donec rhoncus neque enim, vitae vestibulum dui consectetur ac. Pellentesque posuere vulputate nibh, nec pretium turpis lobortis finibus. Etiam vel magna sed ligula rhoncus vulputate in et est. Praesent rutrum placerat leo ac porta. Aenean
malesuada, neque eu varius scelerisque, lorem odio tristique leo, rutrum imperdiet tortor enim sit amet quam. Vestibulum at sollicitudin magna. Ut placerat ultrices lectus venenatis maximus. Fusce risus augue, tempor sit amet cursus ac, imperdiet
a felis. Sed bibendum leo purus, id convallis sapien elementum sed. Donec bibendum tortor ac purus dictum elementum. Cras ut lectus lobortis, maximus est sodales, semper eros. Quisque vehicula feugiat ligula, in ultricies nisi eleifend eu. Fusce
at nisl a lorem blandit dapibus. Nullam eget pulvinar purus. Mauris fermentum elit et ex pellentesque, quis congue ex ullamcorper. Morbi non orci tellus. Morbi ultrices eros quis orci consectetur rutrum at in est. Nullam bibendum risus purus,
a aliquet tortor blandit vel. Curabitur tristique pharetra risus ac rhoncus. Maecenas scelerisque nec ante id congue. Donec aliquam est turpis, vel dictum ante imperdiet sit amet. Vestibulum dapibus, elit vel posuere tempus, magna ex dapibus
sem, et hendrerit metus tortor vitae mauris. Fusce non urna accumsan est dapibus ornare. Curabitur bibendum risus in tortor tincidunt, id auctor dui consequat. Aenean in vulputate eros, sed semper nisi. Fusce eget pretium neque. Cras sollicitudin
mattis mauris eget consectetur. Donec tincidunt odio pharetra mattis tempor.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h2 id="opera">Opera</h2>
<p class="browser-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula neque. Phasellus consequat risus sed magna hendrerit venenatis. Nulla maximus magna eu velit vestibulum, at aliquet arcu dictum. Nam efficitur luctus dictum. Aenean
ex ipsum, iaculis sed venenatis ut, blandit vel augue. Donec vehicula, lorem tristique consectetur porttitor, risus mauris euismod est, ut gravida arcu lacus sodales ligula. Maecenas sed tempus ipsum. Mauris in augue sit amet mauris feugiat
semper. Donec rhoncus neque enim, vitae vestibulum dui consectetur ac. Pellentesque posuere vulputate nibh, nec pretium turpis lobortis finibus. Etiam vel magna sed ligula rhoncus vulputate in et est. Praesent rutrum placerat leo ac porta. Aenean
malesuada, neque eu varius scelerisque, lorem odio tristique leo, rutrum imperdiet tortor enim sit amet quam. Vestibulum at sollicitudin magna. Ut placerat ultrices lectus venenatis maximus. Fusce risus augue, tempor sit amet cursus ac, imperdiet
a felis. Sed bibendum leo purus, id convallis sapien elementum sed. Donec bibendum tortor ac purus dictum elementum. Cras ut lectus lobortis, maximus est sodales, semper eros. Quisque vehicula feugiat ligula, in ultricies nisi eleifend eu. Fusce
at nisl a lorem blandit dapibus. Nullam eget pulvinar purus. Mauris fermentum elit et ex pellentesque, quis congue ex ullamcorper. Morbi non orci tellus. Morbi ultrices eros quis orci consectetur rutrum at in est. Nullam bibendum risus purus,
a aliquet tortor blandit vel. Curabitur tristique pharetra risus ac rhoncus. Maecenas scelerisque nec ante id congue. Donec aliquam est turpis, vel dictum ante imperdiet sit amet. Vestibulum dapibus, elit vel posuere tempus, magna ex dapibus
sem, et hendrerit metus tortor vitae mauris. Fusce non urna accumsan est dapibus ornare. Curabitur bibendum risus in tortor tincidunt, id auctor dui consequat. Aenean in vulputate eros, sed semper nisi. Fusce eget pretium neque. Cras sollicitudin
mattis mauris eget consectetur. Donec tincidunt odio pharetra mattis tempor.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h2 id="firefox">Firefox</h2>
<p class="browser-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula neque. Phasellus consequat risus sed magna hendrerit venenatis. Nulla maximus magna eu velit vestibulum, at aliquet arcu dictum. Nam efficitur luctus dictum. Aenean
ex ipsum, iaculis sed venenatis ut, blandit vel augue. Donec vehicula, lorem tristique consectetur porttitor, risus mauris euismod est, ut gravida arcu lacus sodales ligula. Maecenas sed tempus ipsum. Mauris in augue sit amet mauris feugiat
semper. Donec rhoncus neque enim, vitae vestibulum dui consectetur ac. Pellentesque posuere vulputate nibh, nec pretium turpis lobortis finibus. Etiam vel magna sed ligula rhoncus vulputate in et est. Praesent rutrum placerat leo ac porta. Aenean
malesuada, neque eu varius scelerisque, lorem odio tristique leo, rutrum imperdiet tortor enim sit amet quam. Vestibulum at sollicitudin magna. Ut placerat ultrices lectus venenatis maximus. Fusce risus augue, tempor sit amet cursus ac, imperdiet
a felis. Sed bibendum leo purus, id convallis sapien elementum sed. Donec bibendum tortor ac purus dictum elementum. Cras ut lectus lobortis, maximus est sodales, semper eros. Quisque vehicula feugiat ligula, in ultricies nisi eleifend eu. Fusce
at nisl a lorem blandit dapibus. Nullam eget pulvinar purus. Mauris fermentum elit et ex pellentesque, quis congue ex ullamcorper. Morbi non orci tellus. Morbi ultrices eros quis orci consectetur rutrum at in est. Nullam bibendum risus purus,
a aliquet tortor blandit vel. Curabitur tristique pharetra risus ac rhoncus. Maecenas scelerisque nec ante id congue. Donec aliquam est turpis, vel dictum ante imperdiet sit amet. Vestibulum dapibus, elit vel posuere tempus, magna ex dapibus
sem, et hendrerit metus tortor vitae mauris. Fusce non urna accumsan est dapibus ornare. Curabitur bibendum risus in tortor tincidunt, id auctor dui consequat. Aenean in vulputate eros, sed semper nisi. Fusce eget pretium neque. Cras sollicitudin
mattis mauris eget consectetur. Donec tincidunt odio pharetra mattis tempor.</p>
</div>
</div>
<div class="row">
<div class="scroll col-12">
<h2 id="safari">Safari</h2>
<p class="browser-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula neque. Phasellus consequat risus sed magna hendrerit venenatis. Nulla maximus magna eu velit vestibulum, at aliquet arcu dictum. Nam efficitur luctus dictum. Aenean
ex ipsum, iaculis sed venenatis ut, blandit vel augue. Donec vehicula, lorem tristique consectetur porttitor, risus mauris euismod est, ut gravida arcu lacus sodales ligula. Maecenas sed tempus ipsum. Mauris in augue sit amet mauris feugiat
semper. Donec rhoncus neque enim, vitae vestibulum dui consectetur ac. Pellentesque posuere vulputate nibh, nec pretium turpis lobortis finibus. Etiam vel magna sed ligula rhoncus vulputate in et est. Praesent rutrum placerat leo ac porta. Aenean
malesuada, neque eu varius scelerisque, lorem odio tristique leo, rutrum imperdiet tortor enim sit amet quam. Vestibulum at sollicitudin magna. Ut placerat ultrices lectus venenatis maximus. Fusce risus augue, tempor sit amet cursus ac, imperdiet
a felis. Sed bibendum leo purus, id convallis sapien elementum sed. Donec bibendum tortor ac purus dictum elementum. Cras ut lectus lobortis, maximus est sodales, semper eros. Quisque vehicula feugiat ligula, in ultricies nisi eleifend eu. Fusce
at nisl a lorem blandit dapibus. Nullam eget pulvinar purus. Mauris fermentum elit et ex pellentesque, quis congue ex ullamcorper. Morbi non orci tellus. Morbi ultrices eros quis orci consectetur rutrum at in est. Nullam bibendum risus purus,
a aliquet tortor blandit vel. Curabitur tristique pharetra risus ac rhoncus. Maecenas scelerisque nec ante id congue. Donec aliquam est turpis, vel dictum ante imperdiet sit amet. Vestibulum dapibus, elit vel posuere tempus, magna ex dapibus
sem, et hendrerit metus tortor vitae mauris. Fusce non urna accumsan est dapibus ornare. Curabitur bibendum risus in tortor tincidunt, id auctor dui consequat. Aenean in vulputate eros, sed semper nisi. Fusce eget pretium neque. Cras sollicitudin
mattis mauris eget consectetur. Donec tincidunt odio pharetra mattis tempor.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h2 id="edge">Edge</h2>
<p class="browser-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula neque. Phasellus consequat risus sed magna hendrerit venenatis. Nulla maximus magna eu velit vestibulum, at aliquet arcu dictum. Nam efficitur luctus dictum. Aenean
ex ipsum, iaculis sed venenatis ut, blandit vel augue. Donec vehicula, lorem tristique consectetur porttitor, risus mauris euismod est, ut gravida arcu lacus sodales ligula. Maecenas sed tempus ipsum. Mauris in augue sit amet mauris feugiat
semper. Donec rhoncus neque enim, vitae vestibulum dui consectetur ac. Pellentesque posuere vulputate nibh, nec pretium turpis lobortis finibus. Etiam vel magna sed ligula rhoncus vulputate in et est. Praesent rutrum placerat leo ac porta. Aenean
malesuada, neque eu varius scelerisque, lorem odio tristique leo, rutrum imperdiet tortor enim sit amet quam. Vestibulum at sollicitudin magna. Ut placerat ultrices lectus venenatis maximus. Fusce risus augue, tempor sit amet cursus ac, imperdiet
a felis. Sed bibendum leo purus, id convallis sapien elementum sed. Donec bibendum tortor ac purus dictum elementum. Cras ut lectus lobortis, maximus est sodales, semper eros. Quisque vehicula feugiat ligula, in ultricies nisi eleifend eu. Fusce
at nisl a lorem blandit dapibus. Nullam eget pulvinar purus. Mauris fermentum elit et ex pellentesque, quis congue ex ullamcorper. Morbi non orci tellus. Morbi ultrices eros quis orci consectetur rutrum at in est. Nullam bibendum risus purus,
a aliquet tortor blandit vel. Curabitur tristique pharetra risus ac rhoncus. Maecenas scelerisque nec ante id congue. Donec aliquam est turpis, vel dictum ante imperdiet sit amet. Vestibulum dapibus, elit vel posuere tempus, magna ex dapibus
sem, et hendrerit metus tortor vitae mauris. Fusce non urna accumsan est dapibus ornare. Curabitur bibendum risus in tortor tincidunt, id auctor dui consequat. Aenean in vulputate eros, sed semper nisi. Fusce eget pretium neque. Cras sollicitudin
mattis mauris eget consectetur. Donec tincidunt odio pharetra mattis tempor.</p>
</div>
</div>
<div class="bottom-padding row">
<div class="col-12">
<h2 id="other">Other browsers</h2>
<p class="browser-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula neque. Phasellus consequat risus sed magna hendrerit venenatis. Nulla maximus magna eu velit vestibulum, at aliquet arcu dictum. Nam efficitur luctus dictum. Aenean
ex ipsum, iaculis sed venenatis ut, blandit vel augue. Donec vehicula, lorem tristique consectetur porttitor, risus mauris euismod est, ut gravida arcu lacus sodales ligula. Maecenas sed tempus ipsum. Mauris in augue sit amet mauris feugiat
semper. Donec rhoncus neque enim, vitae vestibulum dui consectetur ac. Pellentesque posuere vulputate nibh, nec pretium turpis lobortis finibus. Etiam vel magna sed ligula rhoncus vulputate in et est. Praesent rutrum placerat leo ac porta. Aenean
malesuada, neque eu varius scelerisque, lorem odio tristique leo, rutrum imperdiet tortor enim sit amet quam. Vestibulum at sollicitudin magna. Ut placerat ultrices lectus venenatis maximus. Fusce risus augue, tempor sit amet cursus ac, imperdiet
a felis. Sed bibendum leo purus, id convallis sapien elementum sed. Donec bibendum tortor ac purus dictum elementum. Cras ut lectus lobortis, maximus est sodales, semper eros. Quisque vehicula feugiat ligula, in ultricies nisi eleifend eu. Fusce
at nisl a lorem blandit dapibus. Nullam eget pulvinar purus. Mauris fermentum elit et ex pellentesque, quis congue ex ullamcorper. Morbi non orci tellus. Morbi ultrices eros quis orci consectetur rutrum at in est. Nullam bibendum risus purus,
a aliquet tortor blandit vel. Curabitur tristique pharetra risus ac rhoncus. Maecenas scelerisque nec ante id congue. Donec aliquam est turpis, vel dictum ante imperdiet sit amet. Vestibulum dapibus, elit vel posuere tempus, magna ex dapibus
sem, et hendrerit metus tortor vitae mauris. Fusce non urna accumsan est dapibus ornare. Curabitur bibendum risus in tortor tincidunt, id auctor dui consequat. Aenean in vulputate eros, sed semper nisi. Fusce eget pretium neque. Cras sollicitudin
mattis mauris eget consectetur. Donec tincidunt odio pharetra mattis tempor.</p>
</div>
</div>
</div>
<footer class="bg-dark text-white mt-4">
<div class="container-fluid py-3">
<div class="row">
<div class="col-md-3">
<h4><a href="#top"><i class="fa fa-arrow-up"></i>Click here to go the top!</a></h4>
</div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</footer>
<!-- 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="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src=" https://use.fontawesome.com/359ea94094.js"></script>
<script src="js/tbdjs-main.js"></script>
</body>
</html>
知道我做错了什么吗？我有点在这里结束了......
答案 0 :(得分：0)
很奇怪。我不知道自己在做什么。通过更改CDN，现在您的代码工作正常。
<!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-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="tbd.css">
<link rel="stylesheet" type="text/css" href="css/hover-min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Poppins" rel="stylesheet">
</head>
<body class="pattern-svg-background">
<div class="col-xl-1-12|auto">
<div id="top" class="jumbotron">
<h1 class="display-3">Hello there,buddy!</h1>
<p class="lead">It is time to choose a browser but there are so many great choices that you get confused on what to pick! </p>
<hr class="m-y-md">
<p>This is where I come in! I'm going to explain the pros and cons of most popular(and less popular) browsers. Pick your browser in the menu below!</p>
<p class="lead">
<nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav text-md-center nav-justified w-100">
<li class="nav-item">
<a class="nav-link" href="#chrome"><i class="fa fa-chrome fa-fw" aria-hidden="true"></i>Google Chrome<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#opera"><i class="fa fa-opera fa-fw" aria-hidden="true"></i>Opera</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#safari"><i class="fa fa-safari fa-fw" aria-hidden="true"></i>Safari</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#firefox"><i class="fa fa-firefox fa-fw" aria-hidden="true"></i>Firefox</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#edge"><i class="fa fa-edge fa-fw" aria-hidden="true"></i>Edge</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Other browsers</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#other">Vivaldi</a>
<a class="dropdown-item" href="#other">Midori</a>
<a class="dropdown-item" href="#other">Pale Moon</a>
</div>
</li>
</ul>
</div>
</nav>
</p>
</div>
</div>
<div class="bg-browser-info-text container-fluid">
<div class="row">
<div class="col-12">
<h2 id="chrome">Google Chrome</h2>
<p class="browser-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula neque. Phasellus consequat risus sed magna hendrerit venenatis. Nulla maximus magna eu velit vestibulum, at aliquet arcu dictum. Nam efficitur luctus dictum. Aenean
ex ipsum, iaculis sed venenatis ut, blandit vel augue. Donec vehicula, lorem tristique consectetur porttitor, risus mauris euismod est, ut gravida arcu lacus sodales ligula. Maecenas sed tempus ipsum. Mauris in augue sit amet mauris feugiat
sem, et hendrerit metus tortor vitae mauris. Fusce non urna accumsan est dapibus ornare. Curabitur bibendum risus in tortor tincidunt, id auctor dui consequat. Aenean in vulputate eros, sed semper nisi. Fusce eget pretium neque. Cras sollicitudin
mattis mauris eget consectetur. Donec tincidunt odio pharetra mattis tempor.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h2 id="opera">Opera</h2>
<p class="browser-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula neque. Phasellus consequat risus sed magna hendrerit venenatis. Nulla maximus magna eu velit vestibulum, at aliquet arc
sem, et hendrerit metus tortor vitae mauris. Fusce non urna accumsan est dapibus ornare. Curabitur bibendum risus in tortor tincidunt, id auctor dui consequat. Aenean in vulputate eros, sed semper nisi. Fusce eget pretium neque. Cras sollicitudin
mattis mauris eget consectetur. Donec tincidunt odio pharetra mattis tempor.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h2 id="firefox">Firefox</h2>
<p class="browser-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula neque. Phasellus consequat risus sed magna hendrerit venenatis. Nulla maximus magna eu velit vestibulum, at aliquet arcu et hendrerit metus tortor vitae mauris. Fusce non urna accumsan est dapibus ornare. Curabitur bibendum risus in tortor tincidunt, id auctor dui consequat. Aenean in vulputate eros, sed semper nisi. Fusce eget pretium neque. Cras sollicitudin
mattis mauris eget consectetur. Donec tincidunt odio pharetra mattis tempor.</p>
</div>
</div>
<div class="row">
<div class="scroll col-12">
<h2 id="safari">Safari</h2>
<p class="browser-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula neque. Phasellus consequat risus sed magna hendrerit venenatis. Nulla maximus magna eu velit vestibulum, at aliquet arcu dictum. Nam efficitur luctus dictum. Aenean
it vel. Curabitur tristique pharetra risus ac rhoncus. Maecenas scelerisque nec ante id congue. Donec aliquam est turpis, vel dictum ante imperdiet sit amet. Vestibulum dapibus, elit vel posuere tempus, magna ex dapibus
sem, et hendrerit metus tortor vitae mauris. Fusce non urna accumsan est dapibus ornare. Curabitur bibendum risus in tortor tincidunt, id auctor dui consequat. Aenean in vulputate eros, sed semper nisi. Fusce eget pretium neque. Cras sollicitudin
mattis mauris eget consectetur. Donec tincidunt odio pharetra mattis tempor.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h2 id="edge">Edge</h2>
<p class="browser-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula neque. Phasellus consequat risus sed magna hendrerit venenatis. Nulla maximus magna eu velit vestibulum, at aliquet arcu dictum. Nam efficitur luctus dictum. Aenean
semper. Donec rhoncus neque enim, vitae vestibulum dui consectetur ac. Pellentesque posuere vulputate nibh, nec pretium turpis lobortis finibus. Etiam vel magna sed ligula rhoncus vulputate in et est. Praesent rutrum placerat leo ac porta. Aenean
mattis mauris eget consectetur. Donec tincidunt odio pharetra mattis tempor.</p>
</div>
</div>
<div class="bottom-padding row">
<div class="col-12">
<h2 id="other">Other browsers</h2>
<p class="browser-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula neque. Phasellus consequat risus sed magna hendrerit venenatis. Nulla maximus magna eu velit vestibulum, at aliquet arcu dictum. Nam efficitur luctus dictum. Aenean
mattis mauris eget consectetur. Donec tincidunt odio pharetra mattis tempor.</p>
</div>
</div>
</div>
<footer class="bg-dark text-white mt-4">
<div class="container-fluid py-3">
<div class="row">
<div class="col-md-3">
<h4><a href="#top"><i class="fa fa-arrow-up"></i>Click here to go the top!</a></h4>
</div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<!-- custom script -->
<script type="text/javascript">
$(document).ready(function() {
$('.nav-link').click(function() {
var sectionTo = $(this).attr('href');
$('html, body').animate({
scrollTop: $(sectionTo).offset().top
}, 1000);
});
});
</script>
</body>
</html>
答案 1 :(得分：-1)
如果您正在寻找一个平滑滚动导航点击事件到相应部分，您可以在不使用任何第三方插件的情况下实现它。
找到[[fiddler] [1]供你参考。
希望它有所帮助。
[1]: https://jsfiddle.net/rajsnd08/qp2L2ycv/