平滑滚动不起作用并阻止菜单链接
SmoothScroll is not working and blocking menu links
我有简单的布局，有引导和平滑.js（jQuery）。当我单击链接时没有 js，它们会跳到正确的扇区，但是当我添加平滑时.js它们甚至不会移动或反应。下面的代码，请帮忙，因为我尝试了一些用于平滑滚动的 javascript，每次都有同样的错误，但我看不到它。
$(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>你不需要插件：改用这个。它快速、简单、高效。
$(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>您可以轻松修改函数以使其正常工作。由于 Jquery 使用 css 语法 （#elem） 通过 id 选择元素，并且 href 属性是使用 #tgt 设置的，因此您所要做的就是使用链接的 href 属性创建一个新的 jquery 对象，然后调用滚动顶部以达到该元素的偏移量。
代码如下：
$(function(){
$('a[href^="#"]').click(function(e){
var targetID = $(this).attr('href');
var targetElement = $(targetID);
e.preventDefault();
$('html,body'). animate({
scrollTop: targetElement.offset().top
},'slow');
});
});
小提琴：https://jsfiddle.net/6jzph3rs/
相关文章：
- 我的下拉菜单中的链接不起作用
- 绝对链接/相对链接均未获胜't在菜单中工作
- Javascript+动态菜单+当前链接样式(CSS）+基于PHP的网站
- 当主导航链接悬停时，在侧菜单中显示链接
- 如何在每个下拉菜单项的每个类别下输出链接
- 下拉菜单在我进入链接之前消失了
- 如何分配数据切换＝“;下拉菜单”;用于wordpress中的父链接
- 用这个jQuery动画菜单悬停超链接
- 每个链接的菜单下方的进度条
- Php菜单查询数据库并显示文本/链接
- 在表格最后一行(链接）中显示菜单，并在单击菜单项时显示模式窗口
- 单击手风琴菜单外的链接时折叠jQuery手风琴
- 在阻止默认操作时启用菜单的链接
- jQuery UI链接选择菜单.单击按钮时窗体将重置
- 如何在单击子链接时停止垂直菜单的手风琴
- 当屏幕尺寸较小时，可使用Javascript向移动菜单添加链接.不再有效
- 当子菜单的父级或包含链接处于活动状态时，如何告知子菜单可见
- 如何在 jQuery 中为链接我的“活动”滚动菜单创建例外
- 下拉菜单-链接不起作用
- 重叠的选项卡/下拉菜单-链接不起作用-CSS或JS问题
