0
我使用bootstrap和smooth.js（jQuery）進行簡單佈局。沒有js，當我點擊鏈接時，他們跳到正確的部門，但是當我加入smooth.js時，他們甚至不會移動或反應。下面的代碼，請幫助，因爲我嘗試了一些javascript for smoothscroll，每次都有同樣的錯誤，但我看不到它。SmoothScroll無法正常工作並阻止菜單鏈接
$(function(){
$('a[href^="#"]').click(function(e){
var target = $(this).attr('href');
var strip = target.slice(1);
var anchor = $("[name='"+ strip +"']");
e.preventDefault(); //usuwa przeladowania strony
$('html,body'). animate({
scrollTop: anchor.offset().top
},'slow');
});
});<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="./css/bootstrap-glyphicons.css" type="text/css">
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<nav id=menu class="navbar navbar-fixed-top">
<ul class="nav navbar-nav center">
<li> <a href="#yellow">Home</a>
</li>
<li> <a href="#blue">About us</a>
</li>
<li> <a href="#green">Services</a>
</li>
<li> <a href="#black">Cars</a>
</li>
<li></li>
</ul>
</nav>
</div>
<div class="container-fluid fill" id="yellow">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-12">
<header>All you need to do is</header>
</div>
</div>
<div class="row">
<div class="col-md-2 col-xs-12 col-md-offset-2">
<div class="glyph"><span class="glyphicon glyphicon-search"></span><h3>Search</h3></div>
</div>
<div class="col-md-2 col-xs-12 col-md-offset-1">
<div class="glyph"><span class="glyphicon glyphicon-ok"></span><h3>Choose</h3></div>
</div>
<div class="col-md-2 col-xs-12 col-md-offset-1">
<div class="glyph"><span class="glyphicon glyphicon-phone"></span><h3>Call us</h3></div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-xs-12 col-md-offset-2">
<div class="description"><h3><b>Search our offers or services, any time with simple one page layout.
You don't need a search button, cause everything is right hear, on your computer screen.</b></h3></div>
</div>
<div class="col-md-2 col-xs-12 col-md-offset-1">
<div class="description"><h3><b>Maybe you can't make your decision when every product is on a different page. You can't remamber them all. That's why here everything is on One Page.</b></h3></div>
</div>
<div class="col-md-2 col-xs-12 col-md-offset-1">
<div class="description"><h3><b>Our firm is always avaliable. You need to just call us. Our Call office always will help you with choice, price and maybe you will get some discount too!</b></h3></div>
</div>
</div>
</div>
<div class="container-fluid fill" id="blue">
<div class="row"><div class="col-md-12 col-xs-12"><header>About us</header></div></div>
<div class="row"><div class="col-md-5 col-xs-12 col-md-offset-1"><section id="sec_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla a ex varius varius. Sed placerat, quam a aliquet consequat, dui arcu dignissim nisi, non auctor diam risus vitae dolor. Vestibulum eu egestas mi, ut pulvinar leo. Aliquam elementum tristique leo, quis ullamcorper orci consequat at. Mauris fermentum laoreet nisi, in consectetur augue mollis in. Aenean bibendum ultricies purus, a euismod nulla rutrum quis. Aliquam eleifend eros non tellus tristique pulvinar. Nulla facilisi. Pellentesque a tempus nunc. Nunc condimentum mauris quis dolor molestie, et blandit tellus dapibus. Praesent molestie magna tincidunt accumsan pretium. Suspendisse potenti. Curabitur posuere iaculis mauris eget faucibus. Ut sodales tristique turpis sed eleifend. Donec consequat tellus leo, vel tempus tellus congue nec. Integer aliquet commodo accumsan.
</section></div>
<div class="col-md-5 col-md-offset-1 col-xs-12"><section id="sec_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla a ex varius varius. Sed placerat, quam a aliquet consequat, dui arcu dignissim nisi, non auctor diam risus vitae dolor. Vestibulum eu egestas mi, ut pulvinar leo. Aliquam elementum tristique leo, quis ullamcorper orci consequat at. Mauris fermentum laoreet nisi, in consectetur augue mollis in. Aenean bibendum ultricies purus, a euismod nulla rutrum quis. Aliquam eleifend eros non tellus tristique pulvinar. Nulla facilisi. Pellentesque a tempus nunc. Nunc condimentum mauris quis dolor molestie, et blandit tellus dapibus. Praesent molestie magna tincidunt accumsan pretium. Suspendisse potenti. Curabitur posuere iaculis mauris eget faucibus. Ut sodales tristique turpis sed eleifend. Donec consequat tellus leo, vel tempus tellus congue nec. Integer aliquet commodo accumsan.</section></div></div>
</div>
<div class="container-fluid fill" id="green">
<div class="row">
<div class="col-md-12">
<header>What are we doing for you?</header>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2 services"><h1>First service (Image, text, slider, many option)</h1></div>
<div class="col-md-2 col-md-offset-1 services"><h1>Second service (Image, text, slider, many option)</h1></div>
<div class="col-md-2 col-md-offset-1 services"><h1>Third service (Image, text, slider, many option)</h1></div>
</div>
</div>
</div>
<div class="conteiner-fluid fill" id="black">
<div class="row">
<div class="col-md-12">
<header>Where are we</header>
</div>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div id="map">
</div>
<div class="col-md-5">
<div id="contact"></div>
</div>
</div>
</div>
</div>
<script src="smooth.js"></script>
</body>
</html>