javascript - Bootstrap 4 Beta - Smooth Scrolling with ScrollSpy -
i have problem making anchors smooth-scroll target text. i've tried using jquery other answered questions on here doesn't work odd reason.
no luck scrollspy either. i'm using example of scrollspy smoothscrolling w3schools.
and 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 time choose browser there many great choices confused on pick! </p> <hr class="m-y-md"> <p>this come in! i'm going explain pros , cons of popular(and less popular) browsers. pick browser in 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, @ 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 @ sollicitudin magna. ut placerat ultrices lectus venenatis maximus. fusce risus augue, tempor sit amet cursus ac, imperdiet 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 @ nisl 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 @ in est. nullam bibendum risus purus, 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, @ 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 @ sollicitudin magna. ut placerat ultrices lectus venenatis maximus. fusce risus augue, tempor sit amet cursus ac, imperdiet 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 @ nisl 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 @ in est. nullam bibendum risus purus, 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, @ 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 @ sollicitudin magna. ut placerat ultrices lectus venenatis maximus. fusce risus augue, tempor sit amet cursus ac, imperdiet 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 @ nisl 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 @ in est. nullam bibendum risus purus, 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, @ 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 @ sollicitudin magna. ut placerat ultrices lectus venenatis maximus. fusce risus augue, tempor sit amet cursus ac, imperdiet 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 @ nisl 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 @ in est. nullam bibendum risus purus, 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, @ 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 @ sollicitudin magna. ut placerat ultrices lectus venenatis maximus. fusce risus augue, tempor sit amet cursus ac, imperdiet 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 @ nisl 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 @ in est. nullam bibendum risus purus, 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, @ 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 @ sollicitudin magna. ut placerat ultrices lectus venenatis maximus. fusce risus augue, tempor sit amet cursus ac, imperdiet 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 @ nisl 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 @ in est. nullam bibendum risus purus, 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 go 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, popper.js, 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 i'm doing wrong? i'm kind of @ wit's end here...
it quite strange. don't know doing. changing cdn, code 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 time choose browser there many great choices confused on pick! </p> <hr class="m-y-md"> <p>this come in! i'm going explain pros , cons of popular(and less popular) browsers. pick browser in 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, @ 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, @ 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, @ 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, @ aliquet arcu dictum. nam efficitur luctus dictum. aenean 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, @ 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, @ 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 go 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, popper.js, 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>
Comments
Post a Comment