Bootstrap 4 Beta-使用ScrollSpy平滑滚动

Question

I have a problem with making my anchors smooth-scroll to target text. 使锚点平滑滚动到目标文本时出现问题。 I've tried using jQuery from other answered questions on here but that simply doesn't work for some odd reason. 我已经尝试从这里的其他回答问题中使用jQuery，但是由于某些奇怪的原因，这根本行不通。

No luck with ScrollSpy either. ScrollSpy也没有运气。 I'm using this example of ScrollSpy SmoothScrolling from W3Schools. 我正在使用W3Schools的ScrollSpy SmoothScrolling这个示例。

And this is my markup: 这是我的标记：

 <!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="my-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>

Any idea what I'm doing wrong? 知道我在做什么错吗？ I'm kind of at my wit's end here... 我有点机智...

Answer 1

It is quite strange. 这很奇怪。 I don't know what am doing. 我不知道在做什么 By changing CDN, now your code is working fine. 通过更改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="my-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>

Answer 2

If you are looking for a smooth scroll on navigation click event to respective section, you can achieve it without using any third party plugins. 如果要在导航单击事件上平滑滚动到相应部分，则可以在不使用任何第三方插件的情况下实现此目的。

Find this [fiddler][1] for your reference. 找到此[小提琴手] [1]供参考。

Hope it helps. 希望能帮助到你。

[1]: https://jsfiddle.net/rajsnd08/qp2L2ycv/

Bootstrap 4 Beta-使用ScrollSpy平滑滚动

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-08-18 12:26:04

解决方案2
-1 2017-08-18 11:19:38

Bootstrap 4 Beta-使用ScrollSpy平滑滚动

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-08-18 12:26:04

解决方案2 -1 2017-08-18 11:19:38

解决方案1
0 已采纳 2017-08-18 12:26:04

解决方案2
-1 2017-08-18 11:19:38