I have website with a javaScript function that should scroll to section on page when user clicks a navigation item. This script worked before I made changes to my nav menu. I can not figure out how to reference the ID's in the javaScript correctly.
我有一个带有javaScript函数的网站,当用户单击一个导航项时,它应该滚动到页面上的部分。在我修改导航菜单之前,这个脚本是有效的。我不知道如何在javaScript中正确引用ID。
Here is HTML nav menu:
这是HTML导航菜单:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Data Detective</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a id="home" href="#homeSect">HOME</a></li>
<li><a id="about" href="#aboutSect">ABOUT</a></li>
<li><a id="portfolio" href="#portfolioSect">PORTFOLIO</a></li>
<li><a id="contact" href="#contactSect">CONTACT</a></li>
</ul>
</div>
</div>
</div>
Here is the javaScript:
这是javaScript:
$(document).ready(function() {
setBindings();
});
//Allow screen to Scroll to selected section
function setBindings() {
$("nav ul li a").click(function (tip) {
tip.preventDefault();
var sectionID = "#" + tip.currentTarget.id + "Sect";
alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $(sectionID).offset().top
}, 1000);
});
}
3 个解决方案
#1
2
You should use .navbar
class. Please change:
您应该使用.navbar类。请更改:
$("nav ul li a").click(function (tip) {
TO
来
$(".navbar ul li a").click(function (tip) {
Further more, I recommend you to use var sectionID = $(this).attr('href');
instead var sectionID = "#" + tip.currentTarget.id + "Sect";
because it's more simply.
此外,我建议您使用var sectionID = $(this).attr('href');相反,var sectionID = "#" + tip.currentTarget。id +“教派”;因为它是更简单。
#2
2
Your jQuery selector:
你的jQuery选择器:
$("nav ul li a")
will search for the element <nav>
(which doesn't exist).
将搜索元素
Instead, you can use the selector:
相反,您可以使用选择器:
$(".nav a")
#3
0
I would do a more useful global function I guess. I would check for any href with an anchor reference, check if there is a div with that id, and then scroll to that one.
我想我会做一个更有用的全局函数。我将检查任何带锚引用的href,检查是否有带该id的div,然后滚动到该id。
That way you're not limited to the menu but can use the same code everywhere. Also I made the event caputurer the top level document, so you can insert and remove elements at hearts content and it will always work without having to be rebound.
这样,您不仅可以使用菜单,而且可以在任何地方使用相同的代码。此外,我还将事件caputurer设置为*文档,这样您就可以插入和删除元素的内容,并且它将一直工作而不需要反弹。
$(document).on('click','a[href^="#"]',function(e) {
var target = $(e.currentTarget).attr('href');
var $target = $(target);
if($target.length > 0) {
$("html body").animate({
scrollTop: $target.offset().top
}, 1000);
}
});
div.sect {
margin:50px;
height:400px;
width:100%;
background-color:gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a id="blah" href="www.google.nl">Excluded</a></li>
<li><a id="home" href="#homeSect">HOME</a></li>
<li><a id="about" href="#aboutSect">ABOUT</a></li>
<li><a id="portfolio" href="#portfolioSect">PORTFOLIO</a></li>
<li><a id="contact" href="#contactSect">CONTACT</a></li>
<li><a id="blah" href="www.google.nl">Excluded</a></li>
<div class="sect" id="portfolioSect">
portfolioSect
</div>
<div class="sect" id="homeSect">
homeSect
</div>
<div class="sect" id="aboutSect">
aboutSect
</div>
<div class="sect" id="contactSect">
contactSect
</div>
#1
2
You should use .navbar
class. Please change:
您应该使用.navbar类。请更改:
$("nav ul li a").click(function (tip) {
TO
来
$(".navbar ul li a").click(function (tip) {
Further more, I recommend you to use var sectionID = $(this).attr('href');
instead var sectionID = "#" + tip.currentTarget.id + "Sect";
because it's more simply.
此外,我建议您使用var sectionID = $(this).attr('href');相反,var sectionID = "#" + tip.currentTarget。id +“教派”;因为它是更简单。
#2
2
Your jQuery selector:
你的jQuery选择器:
$("nav ul li a")
will search for the element <nav>
(which doesn't exist).
将搜索元素
Instead, you can use the selector:
相反,您可以使用选择器:
$(".nav a")
#3
0
I would do a more useful global function I guess. I would check for any href with an anchor reference, check if there is a div with that id, and then scroll to that one.
我想我会做一个更有用的全局函数。我将检查任何带锚引用的href,检查是否有带该id的div,然后滚动到该id。
That way you're not limited to the menu but can use the same code everywhere. Also I made the event caputurer the top level document, so you can insert and remove elements at hearts content and it will always work without having to be rebound.
这样,您不仅可以使用菜单,而且可以在任何地方使用相同的代码。此外,我还将事件caputurer设置为*文档,这样您就可以插入和删除元素的内容,并且它将一直工作而不需要反弹。
$(document).on('click','a[href^="#"]',function(e) {
var target = $(e.currentTarget).attr('href');
var $target = $(target);
if($target.length > 0) {
$("html body").animate({
scrollTop: $target.offset().top
}, 1000);
}
});
div.sect {
margin:50px;
height:400px;
width:100%;
background-color:gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a id="blah" href="www.google.nl">Excluded</a></li>
<li><a id="home" href="#homeSect">HOME</a></li>
<li><a id="about" href="#aboutSect">ABOUT</a></li>
<li><a id="portfolio" href="#portfolioSect">PORTFOLIO</a></li>
<li><a id="contact" href="#contactSect">CONTACT</a></li>
<li><a id="blah" href="www.google.nl">Excluded</a></li>
<div class="sect" id="portfolioSect">
portfolioSect
</div>
<div class="sect" id="homeSect">
homeSect
</div>
<div class="sect" id="aboutSect">
aboutSect
</div>
<div class="sect" id="contactSect">
contactSect
</div>