我使用bootstrap和smooth.js（jQuery）进行简单的布局。没有js当我点击链接他们跳到正确的扇区，但当我添加smooth.js他们甚至不移动或反应。下面的代码，请帮助因为我尝试了一些javascript for 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>
答案 0 :(得分：0)
您不需要插件： Use this instead 。它快速，简单，高效。
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});<!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>
答案 1 :(得分：0)
您可以轻松修改您的功能以使其工作。由于Jquery使用css语法（#elem）按id选择元素，并且使用#tgt设置href属性，所以你要做的就是使用链接的href属性创建一个新的jquery对象，然后调用scrolltop到它的偏移量元件。
以下是代码：
$(function(){
$('a[href^="#"]').click(function(e){
var targetID = $(this).attr('href');
var targetElement = $(targetID);
e.preventDefault();
$('html,body'). animate({
scrollTop: targetElement.offset().top
},'slow');
});
});