0
Ich habe ein Problem mit meinen Anglern smooth-scroll zum Zieltext. Ich habe versucht, jQuery aus anderen beantworteten Fragen hier zu verwenden, aber das funktioniert einfach nicht aus irgendeinem seltsamen Grund.Bootstrap 4 Beta - Smooth Scrolling mit ScrollSpy
Kein Glück mit ScrollSpy entweder. Ich benutze diese von ScrollSpy SmoothScrolling von W3Schools.
Und das ist mein 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="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>Jede Idee, was ich falsch mache? Ich bin ein bisschen an meinem Witz Ende hier ...
Heiliger Mist, der in Chrome funktioniert! Vielen Dank, Mann! PS: JEEESSSSUUUUSSSS CHRIST, das CDN war wirklich das Problem mit der ganzen Sache! Für alle, die das gleiche Problem haben - BENUTZEN SIE JQuery Slim 3.2.1 NICHT aus dem CDN von Bootstrap 4 !!! – TKD21