我在同一页面中有顶栏和带有锚标记的导航栏。当我点击锚标签时，anchortag的内容确实会在导航栏后面。请在下面找到代码：HTML：
<body>
<!-- Full Body Container -->
<div id="container">
<!-- Start Header Section -->
<header id="header-wrap" class="site-header clearfix">
<!-- Start Top Bar -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-8 col-xs-6">
<!-- Start Contact Info -->
<ul class="contact-details hidden-xs">
<li>
<a href="contact.html">
<i class="icon-envelope">
</i>
<span class="hidden-xs">the email address</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-call-out">
</i>
<span class="hidden-xs"> Call Us: 123456789 </span>
</a>
</li>
</ul>
<!-- End Contact Info -->
</div>
<div class="col-lg-6 col-md-5 col-sm-4 col-xs-12">
<!-- Start Social Links -->
<ul class="social-list">
<li class = "hidden-sm hidden-md hidden-lg">
<a href="#">
<i class="icon-call-out">
</i>
</a>
</li>
<li class = "hidden-sm hidden-md hidden-lg">
<a href="#">
<i class="icon-envelope">
</i>
</a>
</li>
<li>
<a href="#" class="social-link facebook" title="Facebook" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#" class="social-link twitter" title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#" class="social-link google" title="Google Plus" href="#"><i class="fa fa-google-plus"></i></a>
</li>
<li>
<a href="#" class="social-link linkdin" data-toggle="tooltip" data-placement="bottom" title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
<!-- End Social Links -->
</div>
</div>
</div>
</div>
<!-- End Top Bar -->
<!-- Start Logo & Navigation -->
<div id= "fixedbar" class="navbar navbar-default navbar-top" role="navigation" data-spy="affix" data-offset-top="50">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- Stat Toggle Nav Link For Mobiles -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- End Toggle Nav Link For Mobiles -->
<div class="logo-wrapper">
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo6.png" alt="SB Construction">
</a>
</div>
</div>
<!-- Brand and toggle menu for mobile ends -->
<div class="navbar-collapse collapse">
<!-- Start Navigation List -->
<ul class="nav navbar-nav navbar-right">
<li>
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li id= "toplinks">
<a href="#whoweare">
Who We Are
</a>
</li>
<li id= "toplnks">
<a href="#ourvision">
Our Mission
</a>
</li>
<li id= "toplnked">
<a href= "#ourvision">
Our Vision
</a>
</li>
</ul>
</li>
<li>
<a href="services.html">Services</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
<!-- End Navigation List -->
</div>
</div>
<!-- Mobile Menu Start -->
<ul class="wpb-mobile-menu">
<li>
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li id= "mbil1">
<a href="#whoweare">
Who We Are
</a>
</li>
<li id= "mbil2">
<a href="#ourvision">
Our Vision
</a>
</li>
<li id= "mbil3">
<a href= "#ourmission">
Our Mission
</a>
</li>
</ul>
</li>
<li>
<a href="services.html">Services</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
<!-- Mobile Menu End -->
</div>
<!-- End Header Logo & Navigation -->
<div class="clearfix"></div>
</header>
<!-- End Header Section -->
这是我的CSS：
.top-bar {
background: #EEEEEE;
border-bottom: 1px solid #ddd;
}
.top-bar .contact-details li {
display: inline-block;
padding: 8px 0;
}
.top-bar .contact-details li a {
font-size: 14px;
display: block;
margin-right: 15px;
color: #999;
line-height: 32px;
}
.top-bar .contact-details li a i {
padding-right: 5px;
vertical-align: middle;
}
.top-bar ul.social-list {
float: right;
padding: 8px 0;
}
.navbar-top.affix {
width: 100%;
top: 0;
z-index: 9999999;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.navbar-top.affix .logo-wrapper {
margin-top: 15px;
margin-bottom: 18px;
}
.navbar-top.affix .logo-wrapper .navbar-brand img {
width: 100px;
}
.navbar-top.affix .navbar-nav > li {
padding: 15px 0!important;
}
.navbar-top.affix .search-side {
top: 15px;
}
.navbar-top.affix .full-search {
top: 67px;
}
.navbar {
margin-bottom: 0;
background: #fff;
border: none;
border-bottom: 1px solid #eee;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
.logo-wrapper {
margin-top: 19px;
margin-bottom: 17px;
float: left;
}
.navbar-brand {
padding-bottom: 0px;
display: block;
height: auto;
padding-top: 0;
}
.navbar-default .navbar-nav {
margin-right: 5px!important;
position: relative;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
.navbar-default .navbar-nav > li {
padding: 31px 0;
}
.navbar-default .navbar-nav > li > a {
color: #999;
display: block;
font-size: 14px;
font-family: 'Lato', sans-serif;
padding: 7px 16px;
text-transform: uppercase;
font-weight: 700;
border-radius: 0px;
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li > a.active {
color: #ffbb02;
}
.navbar-default .navbar-nav > li > a i {
margin: 0 -2px 0 -5px;
}
.navbar-default .navbar-nav .dropdown {
position: absolute;
left: 0;
top: 100%;
width: 260px;
background-color: #fff;
visibility: hidden;
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav > li.drop:hover .dropdown {
visibility: visible;
opacity: 1;
}
.dropdown li,
.sup-dropdown li {
position: relative;
border-bottom: 1px dotted #eee;
}
.dropdown li:last-child,
.sup-dropdown li:last-child {
border-bottom: none;
}
.dropdown li a,
.sup-dropdown li a {
display: block;
color: #666;
font-size: 14px;
font-family: 'Lato', sans-serif;
font-weight: 400;
padding: 11px 16px;
margin: 0;
text-decoration: none;
text-transform: capitalize;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.dropdown li a i {
margin: 0 0 0 -4px;
}
.navbar-default .navbar-nav .sup-dropdown {
position: absolute;
left: 100%;
top: 0;
width: 260px;
background-color: #fff;
margin-top: 10px;
transition: margin-top 0.2s ease-in-out;
-moz-transition: margin-top 0.2s ease-in-out;
-webkit-transition: margin-top 0.2s ease-in-out;
-o-transition: margin-top 0.2s ease-in-out;
visibility: hidden;
z-index: 3;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav li.drop .dropdown li:hover .sup-dropdown {
visibility: visible;
margin-top: 0;
}
.dropdown > li:hover > a,
.sup-dropdown li:hover > a {
color: #fff;
background-color: #ffbb02;
}
.dropdown li a.active,
.sup-dropdown li a.active {
color: #fff;
background-color: #ffbb02;
}
.nav > li.drop:hover ul.dropdown {
display: block;
-webkit-animation: drop-up 400ms ease both;
-moz-animation: drop-up 400ms ease both;
-o-animation: drop-up 400ms ease both;
animation: drop-up 400ms ease both;
}
@media screen and (max-width: 767px) {
.js #wpb-mobile-menu {
display: none;
}
.js .slicknav_menu {
display: block;
}
}
这是我通过stackoverflow帖子搜索的Javascript：
$("#toplinks, #toplnks, #toplnked").on('click','a', function(event){
event.preventDefault();
var o = $( $(this).attr("href") ).offset();
var sT = o.top - $("#fixedbar").outerHeight(true);
window.scrollTo(0,sT);
});
因此，每当我点击锚标记时，ID＆＃34; whoweare＆＃34;将从页面顶部开始（在导航栏后面）。请注意我的导航栏顶部有顶部栏，滚动栏（顶部栏）隐藏，导航栏位于顶部。
另请注意，我已添加索引页面的代码（第一页），顶栏和导航栏的相同代码我将用于其他页面（例如：服务，项目等）。 请帮我解决导航栏功能问题。
答案 0 :(得分：0)
我开始工作......
请阅读这些详细解释。
首先：
使用jQuery，您必须使用HTML中实际存在的选择器
在您的脚本中，"#toplinks，#toplnks，#toplnked和#fixedbar只是提及一切。
影响是你的脚本根本就没有触发过。 您观察到的滚动效果是链接点击的自然默认行为。
第二：
你有两个＆＃34;特殊情况＆＃34;这个脚本不应该与其他链接做同样的事情。
top-nav
它不应该计算偏移量
href属性（href="#"）
然后在脚本中，您必须检查是否定义了$(this).attr("href")以避免脚本错误。我留下了许多解释console.log()，因为我非常确定您会使用此菜单添加元素。
您肯定会注意到该脚本在子菜单项上运行两次
那是因为事件是＆＃34; bublling＆＃34;到其父母（＆＃34;第4节＆＃34; a）
但这没什么大不了的。
如果你试图阻止这个＆＃34;冒泡＆＃34;效果，你将打破菜单上的Bootstrap动作
因此，请在最后一页上删除或注释掉所有console.log()
;）
这是脚本
这是一个CodePen，你可以玩（并看看我是如何工作的）。
console.clear()
console.log("READY!");
$(".navbar-nav li").on('click','a', function(event){
event.preventDefault();
// Which link was clicked?
console.log($(this).attr("href"));
// Section 1 case:
if( $(this).attr("href")=="#section1" ){
$("body").scrollTop(0);
console.log("Window simply has to scroll to position: 0");
}
// Section 4 case (Or any link which triggers a sub-menu)
if(typeof($(this).attr("href"))=="undefined"){
console.log("This link shall NOT trigger a scroll.");
}
// All the other cases.
if(typeof($(this).attr("href"))!="undefined" && $(this).attr("href")!="#section1"){
var o = $( $(this).attr("href") ).offset();
var sT = o.top - $(".navbar").outerHeight(true);
window.scrollTo(0,sT);
console.log("Section offset is: "+o.top);
console.log("Nav bar height is: "+$(".navbar").outerHeight(true));
console.log("Window has to scroll to position: "+sT);
}
// Just an empty console line for clarity.
console.log("");
});