Bootstrap 4 Beta - Smooth Scrolling with 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.
No luck with ScrollSpy either. I'm using this example of ScrollSpy SmoothScrolling from W3Schools.
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...
2 answers
solution1
0 ACCPTED 2017-08-18 12:26:04
It is quite strange. I don't know what am doing. By changing CDN, now your code is working fine.
<!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>
solution2
-1 2017-08-18 11:19:38
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.
Hope it helps.
[1]: https://jsfiddle.net/rajsnd08/qp2L2ycv/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Smooth scrolling with Bootstrap scrollspy
Twitter bootstrap scrollspy not working with nav-pills and smooth scrolling
Adding smooth scrolling to bootstrap 4.1 (While using scrollspy)?
bootstrap 4 beta scrollspy not working
Bootstrap: ScrollSpy and smooth scroll
Scrollspy not working - Bootstrap 4 Beta
Bootstrap scrollspy offset and smooth animate
Bootstrap: scrollspy doesn't work after I've added smooth scrolling
Smooth scrolling on BS4 fixed navbar with scrollspy
Bootstrap Sidebar Scrolling, Affix & Scrollspy
Related Tags